javascript - Manually set the focus on input element in angular js -

i create 1 input element , on click show list of items after selecting item list hide.

but focus not on element down,

so want manually set focus on input element when radio button list hide.

here use following code,

view

 <label class="item item-input item-stacked-label" ng-click="showdays()">             <span class="input-label black-text">days</span>             <span class="input-ctrl">             <input type="text" id="days" readonly  ng-model="data_day" focus-on="!daysflag">             </span>  </label>  <div ng-show="daysflag">           <ion-radio icon="ion-ios-checkmark" ng-model="data_day" ng-value="{{day}}" ng-repeat="day in days" ng-click="hidedayflag()">{{day}}</ion-radio>  </div> 

controller

        $scope.days = [1, 2, 3, 4, 5, 6, 7];          $scope.showdays = function() {           $scope.daysflag = true;         }         $scope.hidedayflag = function() {           $scope.daysflag = false;         } 

directive

 .directive('focuson',function($timeout) {             return {                 restrict : 'a',                 link : function($scope,$element,$attr) {                     $scope.$watch($attr.focuson,function(_focusval) {                         $timeout(function() {                             _focusval ? $element[0].focus() :                                 $element[0].blur();                         });                     });                 }             }         }); 

please me solve issue.

you wrong use function scope.$watch. scope.$watch used track changes in $scope.

see detail explanation.

example on jsfiddle.

angular.module('exampleapp', [])    .controller('examplecontroller', function() {      var vm = this;      vm.isfocus = false;    })    .directive('focuson', function() {      return {        restrict: 'a',        scope: {          focuson: "="        },        link: function(scope, $element, $attr) {          scope.$watch('focuson', function(_focusval) {            _focusval ? $element[0].focus() :              $element[0].blur();          });          $element.on("focus", function() {            scope.$applyasync(function() {              scope.focuson = true;            });          });          $element.on("blur", function() {              scope.$applyasync(function() {              scope.focuson = false;            });          })        }      }    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="exampleapp">    <div ng-controller="examplecontroller vm">      <input ng-model="vm.countrow" focus-on="vm.isfocus">      <input type="button" value="focus" ng-click="vm.isfocus=true">      <input type="button" value="blur" ng-click="vm.isfocus=false">{{vm.isfocus}}    </div>  </div>