AngularJS: auto focus into input field when ng-show event is triggered

I came across the problem of setting the focus on input field when the field was shown conditionally by ng-show directive of AngularJS. I came up with following custom directive to solve the problem:

app.directive('showFocus', function($timeout) {
 return function(scope, element, attrs) {
 scope.$watch(attrs.showFocus, 
 function (newValue) { 
 $timeout(function() {
 newValue && element.focus();
 });
 },true);
 }; 
});

Usage:

<input type="text" ng-show="customcondition" show-focus="customcondition">

Related protips

Have a fresh tip? Share with Coderwall community!