title: Jquery-steps -- How to trigger ng-messages validation from controller js code
body: <p>I have a form, which has components bound to <a href="https://docs.angularjs.org/api/ngMessages/directive/ngMessages" rel="nofollow noreferrer">ng-messages</a> validation system, and which is divided into several sections using <a href="http://www.jquery-steps.com/" rel="nofollow noreferrer">jquery-steps</a>.</p>
  
  <p>I need to trigger validation when user navigates from section to section pressing <code>jquery-steps</code> buttons. These are simple buttons, which do not submit the form. In the code, that is bound to the navigation between sections I can clearly see if the data is typed in and whether it is correct : for instance, I can successfully refer to  <code>$scope.eventForm.title.$valid</code>. However, I would like to force-show validation messages when the data is incorrect. Currently they only appear after I click on either of the inputs, but I would like to trigger them from controller. Is it possible?</p>
  
  <p>The html of the view:</p>
  
  <pre><code>&lt;div ng-controller="eventDetailsController as ctrl" ng-cloak&gt;
    &lt;md-content class="md-padding" layout-xs="column" layout="row" layout-align="center center"&gt;
      &lt;div flex-xs flex-gt-xs="70" layout="column"&gt;
        &lt;form name="eventForm"&gt;
          &lt;div wizard="{content: '#format-toolbar-options', position: 'top'}" id="event_wizard"&gt;
  
            &lt;h3&gt;Basic data&lt;/h3&gt;
            &lt;section&gt;
  
              &lt;md-card&gt;
                &lt;img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out"/&gt;
                &lt;md-card-title&gt;
                  &lt;md-card-title-text&gt;
                    &lt;h3&gt;New event&lt;/h3&gt;
                  &lt;/md-card-title-text&gt;
                &lt;/md-card-title&gt;
                &lt;md-card-content&gt;
  
                  &lt;div layout="row"&gt;
                    &lt;md-input-container class="md-block" flex="50"&gt;
                      &lt;label&gt;Title&lt;/label&gt;
                      &lt;input md-maxlength="30" required md-no-asterisk name="title" ng-model="event.title"&gt;
                      &lt;div ng-messages="eventForm.title.$error"&gt;
                        &lt;div ng-message="required"&gt;This is required.&lt;/div&gt;
                        &lt;div ng-message="md-maxlength"&gt;The title must be less than 30 characters long.&lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/md-input-container&gt;
                  &lt;/div&gt;
  
                  &lt;div layout="row"&gt;
                    &lt;md-input-container class="md-block"&gt;
                      &lt;label&gt;Contacts&lt;/label&gt;
                      &lt;input required type="email" name="contacts" ng-model="event.contacts"
                  minlength="10"  maxlength="100" ng-pattern="/^.+@.+\..+$/" /&gt;
  
                      &lt;div ng-messages="eventForm.contacts.$error" role="alert"&gt;
                        &lt;div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']"&gt;
                          Your email must be between 10 and 100 characters long and look like an e-mail address.
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/md-input-container&gt;
                  &lt;/div&gt;
  
                &lt;/md-card-content&gt;
             &lt;/md-card&gt;
            &lt;/section&gt;
  
            &lt;h3&gt;Some other data&lt;/h3&gt;
            &lt;section&gt;
            &lt;/section&gt;
  
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/md-content&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The controller with function which is bound to navigation between sections :</p>
  
  <pre><code>var eventDetailsController = function($scope, $http, __config){
  
      $scope.stepChanging = function(event, currentIndex, newIndex)
      {
          var valid = true;
          if(!$scope.eventForm.contacts.$valid)
          {
              //call some function which triggers contacts validation message
              //tried this as suggested in one of SO posts, but it did not work out
              $scope.eventForm.contacts.$setTouched();
              valid = false;
          }
          if(!$scope.eventForm.title.$valid)
          {
              //call some function which triggers title validation message
              valid = false;
          }
  
          //call some function which triggers all validation messages
  
          return valid;
      }
  };
  </code></pre>