title: Angular js Move focus to next input field when max character length reached and move focus to previous input field when character length is minimum
body: <p>My Task</p>
  
  <p>Create 3 inputs each with maximum char. length 5 When entering the 5th char. in an input the cursor should jump to the next input right after the char has been inserted. When deleting the 1st char of an input the cursor should jump at the end of previous input right after that char has been deleted.</p>
  
  <p>What I have done</p>
  
  <p>Created 3 input fields and restricted the character length to 5 using watch group and it is working perfectly</p>
  
  <p>My Problem</p>
  
  <p>I need to move my cursor to next input field when a input field reaches maximum character length of 5 and if the first character has been deleted from an input field cursor should move automatically to the previous input field end</p>
  
  <p>my plunker link is here <a href="https://plnkr.co/edit/Bcq6slz9gbK8r6Lm8MAh?p=preview" rel="nofollow">https://plnkr.co/edit/Bcq6slz9gbK8r6Lm8MAh?p=preview</a></p>
  
  <p>My angular code </p>
  
  <pre><code>var app = angular.module("task8", []);
  app.controller("taskController8",["$scope", function ($scope) {
  
  $scope.charLength=5
  
  $scope.$watchGroup(['firstInput', 'secondInput', 'thirdInput'], function (newValue, oldValue) {
      if (newValue) {
          if (newValue[0].length &gt; 5) {
              $scope.firstInput = oldValue[0];
          }
          else if (newValue[1].length &gt; 5) {
              $scope.secondInput = oldValue[1];
              newValue[2].focus();
          }
          else if (newValue[2].length &gt; 5) {
              $scope.thirdInput = oldValue[2];
      }
          $scope.charLength = 5 - newValue[0].length;
          $scope.charLength = 5 - newValue[1].length;
          $scope.charLength = 5 - newValue[2].length;
      }
  })
  
  $scope.updateBody = function (event) {
      return false;
  };
   }]);
  </code></pre>