title: Simulate a Tab keypress on Enter and on button element trigger form submit angularjs
body: <p>I have this angular code whereby I have a form and i want upon enter being clicked, it simulates a tab keypress and focuses on the next input. When it gets to the last input, it looks for the button element and then it triggers the ng-submit for the form But for some reasons, angularjs doesnt catch my trigger click function. Does anyone know how to get this done? This is my jsfiddle <a href="http://jsfiddle.net/qujoy4sp/4/" rel="nofollow">http://jsfiddle.net/qujoy4sp/4/</a></p>
  
  <p>This is my directive.js </p>
  
  <pre><code>app.directive('myEnter', function () {
      return function (scope, element, attrs) {
          element.bind("keydown keypress", function (event) {
              var keyCode = event.which || event.keyCode;
        $timeout(function() {
  
          if(attrs.myEnter!= "undefined") {
            event.preventDefault();
            var elementToFocus = element.parent().next().find('button');
              angular.element( elementToFocus[0]).triggerHandler('click');
  
          } else {
            if (keyCode === 13) {
              event.preventDefault();
              var elementToFocus = element.parent().next().find('input');
              if(angular.isDefined(elementToFocus)) {
                elementToFocus[0].focus();
              }
            }
          }   
        })
          });
      };
  });
  
  
  app.directive('errorPopup', function($ionicPopup) {
    return {
      restrict: 'EA',
      scope: {data: '=errorPopup'},
      controller: function($scope, $rootScope) {
      },
      link : function(scope, element, attrs, ngModel) {
        element.bind("submit", function() {
  
          switch(attrs.errorPopup) {
            case 'loginData':
              if(!scope.data.orgCode.$valid) { 
                alert("code is needed")
  
              }
              else if(!scope.data.email.$valid || !scope.data.email.$error) { 
                alert("email is needed")
              }
              else if(!scope.data.password.$valid) { 
                alert("password is needed")
              }
              break;
          } 
        });
      }
    }
  })
  </code></pre>
  
  <p>my login.html</p>
  
  <pre><code>&lt;body ng-app="ap" ng-controller="con"&gt; 
      &lt;div scroll="true"&gt;
        &lt;form name="loginData" class="container ng-scope ng-invalid ng-pristine ng-invalid-required" error-popup="loginData" ng-submit= "loginData.$valid &amp;&amp; doLogin(loginData)" novalidate&gt;
          &lt;div class= "list list-inset login-form"&gt;
  
            &lt;label class="item item-input item-icon-left"&gt;
             &lt;i class="fa fa-building"&gt;&lt;/i&gt;
              &lt;input type="text" name="orgCode" class="hijack-align form-control ng-pristine ng-invalid ng-invalid-required" ng-model="user.orgCode" placeholder="Organization Code" my-enter="undefined" required&gt;
            &lt;/label&gt;
  
            &lt;label class="item item-input item-icon-left"&gt;
              &lt;i class="fa fa-envelope"&gt;&lt;/i&gt; 
              &lt;input type="email" name="email" class="hijack-align form-control ng-pristine ng-invalid ng-invalid-required ng-valid-email" ng-model="user.email" placeholder="Email Address" my-enter="undefined" required&gt;
            &lt;/label&gt;
  
            &lt;label class="item item-input item-icon-left"&gt;
              &lt;i class="fa fa-key"&gt;&lt;/i&gt;
              &lt;input type="Password" name="password" class="hijack-align form-control ng-pristine ng-invalid ng-invalid-required ng-invalid-minlength" ng-model="user.password" placeholder="Your Password" ng-minlength="8" my-enter="submitData" required&gt;
            &lt;/label&gt;
            &lt;div class="login-btn"&gt;
              &lt;button class="button button-block button-positive" type="submit" ng-disabled="submitted"&gt;Log in&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I have some error checking to be done and i want to d it upon form submit hence the other directive called errorPopup but the main thing is to get it to submit the form when it is on the button element. </p>