JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<form name="form">
    <textarea ng-maxlength="10" tabindex="1" auto-next></textarea>
    <textarea ng-maxlength="10" tabindex="2" auto-next></textarea>
    <textarea ng-maxlength="10" tabindex="3" auto-next></textarea>
</form>
</body>

JavaScript

var app = angular.module('app', []);
        app.controller('ctrl', function ($scope) {
        });
        app.directive('autoNext', function() {
            return {
               restrict: 'A',
               link: function(scope, element, attr, form) { 
                   var tabindex = parseInt(attr.tabindex);
                   var maxLength = parseInt(attr.ngMaxlength);
                   element.on('keypress', function(e) {
                       if (element.val().length > maxLength-1) {
                          var next = angular.element(document.body).find('[tabindex=' + (tabindex+1) + ']');
                          if (next.length > 0) {
                              next.focus();
                              return next.triggerHandler('keypress', { which: e.which});
                          }
                          else  {
                              return false;                          
                          }
                       }
                       return true;
                   });
    
               }
            }
        });