JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var app = angular.module("myApp", []);
app.directive("moveNextOnMaxlength", function() {
    return {
        restrict: "A",
        link: function($scope, element) {
            element.on("input", function(e) {
                if(element.val().length == element.attr("maxlength")) {
                    var $nextElement = element.next();
                    if($nextElement.length) {
                        $nextElement[0].focus();
                    }
                }
            });
        }
    }
});