title: Angular: why ng-submit after ng-blur is not working?
body: <p><a href="https://plnkr.co/edit/GfjLEA4Z08tzGmCuYN8v?p=preview" rel="nofollow">In this plunk</a>, if you click on the second field, then click on Submit, you will see that the form was not submitted (See that variable <code>{{submitted}}</code> is still false). ng-blur works fine, as the error message is displayed telling that the field is empty. Why ng-submit is not triggered?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body ng-app="ngMessagesExample" ng-controller="ctl"&gt;
    &lt;form name="myForm" novalidate ng-submit="submitForm()"&gt;
    &lt;label&gt;
      Enter Aaa:
      &lt;input type="text"
             name="aaa"
             ng-model="aaa"
             ng-minlength="2"
             ng-maxlength="5"
             required ng-blur="aaaBlur()" /&gt;
    &lt;/label&gt;
  
    &lt;div ng-show="showAaa || formSubmitted" ng-messages="myForm.aaa.$error" 
         style="color:red" role="alert"&gt;
      &lt;div ng-message="required"&gt;You did not enter a field&lt;/div&gt;
      &lt;div ng-message="minlength"&gt;Your field is too short&lt;/div&gt;
      &lt;div ng-message="maxlength"&gt;Your field is too long&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;br/&gt;
    &lt;label&gt;
      Enter Bbb:
      &lt;input type="text"
             name="bbb"
             ng-model="bbb"
             ng-minlength="2"
             ng-maxlength="5"
             required ng-blur="bbbBlur()" /&gt;
    &lt;/label&gt; &lt;--- click here, then click Submit
  
    &lt;div ng-show="showBbb || formSubmitted" ng-messages="myForm.bbb.$error" 
         style="color:green" role="alert"&gt;
      &lt;div ng-message="required"&gt;You did not enter a field&lt;/div&gt;
      &lt;div ng-message="minlength"&gt;Your field is too short&lt;/div&gt;
      &lt;div ng-message="maxlength"&gt;Your field is too long&lt;/div&gt;
    &lt;/div&gt;
    &lt;br/&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  submitted:{{formSubmitted}} showAaa:{{showAaa}} showBbb:{{showBbb}}
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var app = angular.module('ngMessagesExample', ['ngMessages']);
  
  app.controller('ctl', function ($scope) {
  
    $scope.formSubmitted = false;
    $scope.showAaa = false;
    $scope.showBbb = false;
  
    $scope.submitForm = function() {
      $scope.formSubmitted = true;  
    };
  
  
     $scope.aaaBlur = function() {
      $scope.showAaa = true;
    };  
  
     $scope.bbbBlur = function() {
      $scope.showBbb = true;
    };
  
  });
  </code></pre>