title: AngularJS Form validation Group error message
body: <p>In angularJs <strong>FORM SUBMIT</strong> how to display all validation messagees in one single div at bottom of the page. Ex: </p>
  
  <pre><code>&lt;div id="err-msg"&gt; &lt;!-- error message will come here --&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I referred documents but all are displaying below the text box using </p>
  
  <pre><code>&lt;p ng-show="userForm.email.$invalid &amp;&amp; !userForm.email.$pristine" class="alert alert-danger"&gt;Enter a valid email.&lt;/p&gt;
  </code></pre>
  
  <p>How to write one area to bind all the messages in to same place (avoid use this <code>userForm.email.$invalid</code>)</p>
  
  <p>Note I tried <code>ng-message</code> but am not clear any one help me. Please refer the below code for normal HMTL jQuery error display like need to take care using the AngularJS</p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div id="main"&gt;
  &lt;form&gt; &lt;div&gt;&lt;input id="email_txt" type="text" name ="email" value="" &gt; &lt;/div&gt;
  &lt;div&gt;&lt;input id="pass_txt" type="password" name ="password" value="" &gt; &lt;/div&gt;
  &lt;div&gt;&lt;input id="validate_btn" type="submit" value="Validate" &gt; &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;div id="err-msg"&gt; &lt;!-- error message will come here --&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('#main').on('click', '#validate_btn', function() { 
   if($('#email_txt').val().length == 0){
  $('#err-msg').val("Please enter emailid!");
  }else if($('#pass_txt').val().length == 0){
  $('#err-msg').val("Please enter password!");
  }
  ...
  ...
  else{
    alert("Good");
  }
  });
  </code></pre>
  
  <p>AngularJS current code :</p>
  
  <pre><code>&lt;form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate&gt;
  &lt;div class="form-group"&gt;
    &lt;label&gt;Username&lt;/label&gt;
    &lt;input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8"&gt;
     &lt;p ng-show="userForm.username.$error.minlength" class="help-block"&gt;Username is too short.&lt;/p&gt;
     &lt;p ng-show="userForm.username.$error.maxlength" class="help-block"&gt;Username is too long.&lt;/p&gt; &lt;/div&gt; 
     &lt;input type="email" name="email" class="form-control" ng-model="email"&gt;
     &lt;p ng-show="userForm.email.$invalid &amp;&amp; !userForm.email.$pristine" class="help-block"&gt;Enter a valid email.&lt;/p&gt;
     &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
  &lt;form&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>.controller('validatectrl',['$scope',function($scope){
       $scope.submitForm = function(isValid) {
       // check to make sure the form is completely valid
       if (isValid) {
           alert('Good');
       }
  
      };
   }]);
  </code></pre>
  
  <p>How to rewrite?</p>