AngularJS: How to not lose focus on element if other elements are clicked (using ng-focus/ng-blur)? -

i've got elements inside ng-repeat loop have these attributes:

<div ng-repeat="h in myobjectarray">     <div>         <input ng-class="{ clicked: clickedflag1 }" ng-focus="clickedflag1 = true" ng-blur="clickedflag1 = false" type="button" id="1" value="1" ng-click="btnselected(1)" />     </div>     <div>         <input ng-class="{ clicked: clickedflag2 }" ng-focus="clickedflag2 = true" ng-blur="clickedflag2 = false" type="button" id="2" value="2" ng-click="btnselected(2)" />     </div> </div> 

what happens when 1 of elements clicked, add class clicked clicked element, , removes clicked class other button inputs.

the problem is, if click on other element on rest of page, element clicked no longer has focus , gets it's clicked class removed.

is there anyway still use ng-focus , ng-blur using above have element that's clicked have clicked class when other elements on page clicked?

to explain: before going solution, locating elements via queryselector, adding , removing classes way. pointed out using dom through angularjs way wasn't efficient, went way.

the problem select 1 button , button hold clicked class.

now problem element hold clicked class if else selected on page.

now when know you're trying do, suggestion

<div ng-repeat="h in myobjectarray">     <div>         <input ng-class="{ clicked: clickedflag1 == $index }" ng-click="btnselected(1, $index)" type="button" ng-attr-id="btn1_{{ $index }}" value="1" />     </div>     <div>         <input ng-class="{ clicked: clickedflag2 == $index }" ng-click="btnselected(2, $index)" type="button" ng-attr-id="btn2_{{ $index }}" value="2" />     </div> </div> 

now, on controller, change btnselected function , allow accept second parameter:

$scope.btnselected = function(btnnumber, btnindex) {     if( btnnumber == 1 ) {         $scope.clickedflag1  = btnindex;     } else {         $scope.clickedflag2  = btnindex;     }     // .... rest of code } 

note btnnumber made name, replace current parameter name you're using in function.

when you're inside ngrepeat have $index reference current index in loop, when click on button, set clickflag1 = $index when click on first button (from within controller) on every button groups or clickflag2 = $index second button.

this allow ngclass set click class on button based on current index, instead of trusting focus/blur.

fyi - having multiple elements same id bad practice (you're inside ngrepeat), can change current id ng-attr-id="btn1_{{ $index }}" first button on each group, , ng-attr-id="btn2_{{ $index }}" second button. don't forget remove current id attributes.