Angularjs autofocus on new Input element

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="testApp">
    <div ng-controller="mainCtrl">
      <p>Added at: {{newPos}}</p>
      <name 
        ng-repeat="name in names" 
        index="{{$index+1}}" 
        name="name.name"
        new-pos="newPos"
        add="add($index+1)"></name>
    </div>
  </body>

</html>

// Code goes here

angular.module('testApp', [])
  .controller('mainCtrl', mainCtrl)
  .directive('name', name)
  .directive('keyEnter', keyEnter)
  .directive('customAutofocus', customAutofocus);

function mainCtrl($scope) {
  $scope.names = [{
    id: 0,
    name: 'Tom'
  }];
  // $scope.newPos = $scope.names.length || 0;
  var id = $scope.names.length || 0;

  $scope.add = function(pos) {
    var user = {
      id: id++,
      name: ''
    }

    if (pos !== null && pos != -1) {
      $scope.names.splice(pos, 0, user);
      // $scope.newPos = pos + 1;
    } else {
      $scope.names.push(user);
      // $scope.newPos = $scope.names.length - 1;
    }
  }
}

function customAutofocus($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      // if (scope.index == scope.newPos) {
      //   element[0].focus();
      // }
      
      // scope.$watch(function() {
      //   return scope.$eval(attrs.customAutofocus);
      // }, function(newValue) {
      //   if (newValue === true) {
      //     element[0].focus(); //use focus function instead of autofocus attribute to avoid cross browser problem. And autofocus should only be used to mark an element to be focused when page loads.
      //   }
      // });
      
      //rember this gets run only only 
       //once just after creating the element, so I just neet to focus once, when
       // this digest cycle is done!
       $timeout(function() {
          // use a timout to foucus outside this digest cycle!
          element[0].focus(); //use focus function instead of autofocus attribute to avoid cross browser problem. And autofocus should only be used to mark an element to be focused when page loads.
       }, 0);
    }
  };
}



function name() {
  return {
    restrict: 'E',
    scope: {
      index: "@",
      name: "=",
      add: "&"
    },
    templateUrl: 'name.html'
  }
}

function keyEnter($document) {
  return {
    restrict: "A",
    scope: false,
    link: function(scope, ele, attrs) {
      ele.bind("keydown keypress", function(event) {
        if (event.which === 13) {
          scope.$apply(function() {
            scope.$eval(attrs.keyEnter);
          });

          event.preventDefault();
        }
      });
    }
  }
}

/* Styles go here */

<div>
  <span>{{index}}</span>
  <input type="text" ng-model="name" 
    key-enter="add({pos:index})" 
    custom-autofocus
    tabindex="{{index*10 + 1 }}">
  <button ng-click="add({pos:index})">Add</button>
</div>