title: Angular JS ng-Messages not displaying error messages
body: <p>I am new to form validation using Angular JS so I looked around a lot and found one that was a nice tutorial. The tutorial can be found <a href="https://www.sitepoint.com/easy-form-validation-angularjs-ngmessages/" rel="nofollow noreferrer">here</a>. I know there are a few posts on Stack Overflow about <code>ng-messages</code> however I reviewed them and they do not seem to pertain to my issue. </p>
  
  <p>I have installed <code>ng-messages</code> using bower and am running it with <code>grunt</code>. There are no error however my validation messages do not seem to fire off. </p>
  
  <p><strong>My HTML is as follows:</strong></p>
  
  <pre><code>&lt;form name="myForm" novalidate&gt;
    &lt;fieldset&gt;
  
      &lt;div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid &amp;&amp; !myForm.clientNumber.$pristine }"&gt;
        &lt;label for="client"&gt;SRF #: *&lt;/label&gt;
        &lt;input type="text" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required&gt;
        &lt;div ng-messages="myForm.clientNumber.$error"&gt;
          &lt;!--&lt;div ng-message="required" &gt;SRF # is required.&lt;/div&gt;--&gt;
          &lt;div ng-message="minlength" &gt;SRF Number is too short.&lt;/div&gt;
          &lt;!--&lt;div ng-message="maxlength"&gt;SRF Number is too long.&lt;/div&gt;--&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Part of my app.JS is as follows:</strong></p>
  
  <pre><code>angular
    .module('myApp', [
    // Angular
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngTouch',
    'ui.router',
    'myApp.home',
    'restangular',
    'ngMessages'
  ])
  </code></pre>
  
  <p><strong>Part of my controller is as follows:</strong></p>
  
  <pre><code>(function() {
    'use strict';
    angular.module('myApp.home', [
    'ui.router',
    'myApp.myFactory',
    'ngMessages'
  ])
  .config(homeConfig)
  .controller('homeCtrl', home);
  
  homeConfig.$inject = ['$stateProvider'];
  home.$inject = ['$http','myFactory','$timeout'];
  
  function home($http,myFactory,$timeout) {
    ...
  }
  </code></pre>
  
  <p><strong>What I have looked at and tried:</strong></p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/28303518/ngmessages-angular-validation-not-working">ngMessages/angular validation not working</a></li>
  <li><a href="https://stackoverflow.com/questions/34624312/ng-messages-is-not-working">ng-messages is not working</a></li>
  <li><a href="https://github.com/angular/material/issues/6440" rel="nofollow noreferrer">https://github.com/angular/material/issues/6440</a></li>
  <li><a href="https://github.com/angular/material/issues/2820" rel="nofollow noreferrer">https://github.com/angular/material/issues/2820</a></li>
  <li><a href="https://docs.angularjs.org/api/ngMessages" rel="nofollow noreferrer">https://docs.angularjs.org/api/ngMessages</a></li>
  <li><a href="http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html" rel="nofollow noreferrer">http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html</a></li>
  </ol>
  
  <p>Some in the list are tutorials while others are posts on Stack Overflow: <a href="https://stackoverflow.com/questions/28303518/ngmessages-angular-validation-not-working">ngMessages/angular validation not working</a>.</p>
  
  <p>I do not understand why it does not work. All sites I have seen look to be implementing the same way.</p>