JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
  <form>
    <input type="text" id="part1" ng-model="myObject.part1" move-next-on-maxlength />
    <input type="text" id="part2" ng-model="myObject.part2" move-next-on-maxlength />
    <input type="text" id="part3" ng-model="myObject.part3"  />
  </form>
</div>

JavaScript

var app = angular.module("myApp", []);

app.directive('moveNextOnMaxlength', 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
                        focusNext = false,
                        len = pageElems.length;
                    for (var i = 0; i < len; i++) {
                        var pe = pageElems[i];
                        if (focusNext) {
                            if (pe.style.display !== 'none') {
                                pe.focus();
                                break;
                            }
                        } else if (pe === e.srcElement) {
                            focusNext = true;
                        }
                    }
                }
            });
        }
    }
})