angularjs move focus to next control on enter

I suggest making a custom directive. Something like this. I haven't tested this.

.directive('focus', function() {
  return {
    restrict: 'A',
    link: function($scope,elem,attrs) {

      elem.bind('keydown', function(e) {
        var code = e.keyCode || e.which;
        if (code === 13) {
          e.preventDefault();
          elem.next().focus();
        }
      });
    }
  }
});

Something like that should work. You might have to tweek something. Good luck.

Create a custom directive:

.directive('nextOnEnter', function () {
    return {
        restrict: 'A',
        link: function ($scope, selem, attrs) {
            selem.bind('keydown', function (e) {
                var code = e.keyCode || e.which;
                if (code === 13) {
                    e.preventDefault();
                    var pageElems = document.querySelectorAll('input, select, textarea'),
                        elem = e.srcElement || e.target,
                        focusNext = false,
                        len = pageElems.length;
                    for (var i = 0; i < len; i++) {
                        var pe = pageElems[i];
                        if (focusNext) {
                            if (pe.style.display !== 'none') {
                                angular.element(pe).focus();
                                break;
                            }
                        } else if (pe === elem) {
                            focusNext = true;
                        }
                    }
                }
            });
        }
    }
})

This is the directive I ended up with (thanks to Zack Argyle):

    


    angular.module('myApp').directive("nextFocus", nextFocus);

    /** Usage:
      <input next-focus id="field1">
      <input next-focus id="field2">
      <input id="field3">
      Upon pressing ENTER key the directive will switch focus to
      the next field id e.g field2
      The last field should not have next-focus directive to avoid
      focusing on non-existing element.
      Works for Web, iOS (Go button) & Android (Next button) browsers, 
    **/

    function nextFocus() {
      var directive = {
        restrict: 'A',
        link: function(scope, elem, attrs) {
          elem.bind('keydown', function(e) {
            var partsId = attrs.id.match(/field(\d{1})/);
            var currentId = parseInt(partsId[1]);

            var code = e.keyCode || e.which;
            if (code === 13) {
              e.preventDefault();
              document.querySelector('#field' + (currentId + 1)).focus();
            }
          });
        }
      };
      return directive;

    }