Directive focusing an element when given scope variable becomes boolean true.

FocusOnDirective.js

/*
 * Directive focusing an element when given scope variable becomes boolean true.
 * If the variable becomes equal to boolean false the element is blurred.
 * Usage: <input type="text" focus-on="someScopeVariable === 1" />
 */

angular.module('FocusOnDirective').directive('focusOn', ['$timeout', function ($timeout) {
  'use strict';
  return {
    restrict: 'A',
    scope: {
      focusOn: '='
    },
    link: function (scope, element) {
      scope.$watch('focusOn', function (newValue, oldValue) {
        if (newValue !== oldValue) {
          if (newValue === true) {
            $timeout(function () {
              element[0].focus();
            }, 0);
          } else if (newValue === false) {
            $timeout(function () {
              element[0].blur();
            }, 0);
          }
        }
      });
    }
  };
}]);