angular dynamic focus directive

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="dynamicAutoFocus.js"></script>
  </head>

  <body ng-init='elements = ["first", "second", "third"]' dynamic-auto-focus='setFocusOn'>
    <select ng-model='setFocusOn' ng-options='value as value for (index, value) in elements' >
      <option value=''>[Select an id for focus]</option>
    </select>
  
    <h1>Hello Plunker!</h1>
    <input id='first' />
    <br />
    <input id='second' />
    <br />
    <input id='third' />
  </body>

</html>

// Code goes here

/* Styles go here */

(function(){
  angular.module('ng').directive('dynamicAutoFocus', function(){
    return {
      restrict: 'A',
      link: function(scope, element, attrs){
        scope.$watch(attrs.dynamicAutoFocus, function(id){
          
          if(angular.isDefined(id)){
            var target = document.getElementById(id);
            if(target){
              target.focus();
            }
          }
        });
      }
    };
  });
})();