phone input directive for AngularJS

phoneInput.html

<div class="phoneFields">
    <input type="text" id="phone" ng-model="area" maxlength="3"> - 
    <input type="text" ng-model="prefix" maxlength="3"> - 
    <input type="text" ng-model="suffix" maxlength="4">
</div>

phoneInput.js

angular.module('app')
  .directive('phoneInput', ['$log',
    function ($log) {
      return {
        restrict: 'EA',
        templateUrl: 'partials/directives/phoneInput.html',
        replace: true,
        scope: {
          area: '=',
          prefix: '=',
          suffix: '='
        },
        link: function (scope, element, attrs, controller) {
          var elems = element.find('input');
          var	prefixElem = angular.element(elems[1]),
          suffixElem = angular.element(elems[2]);
          
          scope.$watch('area', function (val) {
            if (val && val.length === 3) {
              prefixElem.focus();
            }
          });
          
          scope.$watch('prefix', function (val) {
            if (val && val.length === 3) {
              suffixElem.focus();
            }
          });
        }
      }
    }
  ]);