title: ng-show Not Showing When input is invalid
body: <p>I am having trouble with form validation in AngularJS. I am trying to show a div based on whether an input is invalid. Angular is putting the correct classes on my inputs (ng-touched and ng-invalid) but it is still keeping the div with a ng-hide class. </p>
  
  <p>form.html
      </p>
  
  <pre><code>                &lt;form id="" name="contactForm"
                  ng-submit="postForm()" novalidate&gt;
                  &lt;div class="form-group row"&gt;
                      &lt;label for="full-name" class="col-lg-2 col-md-3 col-xs-4 col-form-label"&gt;Name&lt;/label&gt;
                      &lt;div class="col-lg-10 col-md-9 col-xs-8"&gt;
                          &lt;input class="form-control" type="text" placeholder="Jon Doe"
                              id="full-name" required data-ng-model="formData.name"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  &lt;!-- This is the only input implemented with the errors --&gt;
                  &lt;div class="form-group row"&gt;
                      &lt;label for="phone-number" class="col-lg-2 col-md-3 col-xs-4 col-form-label"&gt;Phone
                          Number&lt;/label&gt;
                      &lt;div class="col-lg-10 col-md-9 col-xs-8"&gt;
                          &lt;input class="form-control" type="tel"
                              placeholder="(630) 555-6723" id="phone-number" required
                              data-ng-model="formData.phone" name="phone" ng-minlength="10"/&gt;
                              &lt;/div&gt;
                          &lt;div ng-show="(contactForm.phone.$invalid &amp;&amp; contactForm.phone.$touched) || contactForm.phone.$error.minlength"&gt;Please enter a valid phone
                              number.&lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;div class="form-group row"&gt;
                      &lt;label for="email" class="col-lg-2 col-md-3 col-xs-4 col-form-label"&gt;Email&lt;/label&gt;
                      &lt;div class="col-lg-10 col-md-9 col-xs-8"&gt;
                          &lt;input class="form-control" type="email"
                              placeholder="jon.doe@gmail.com" id="email" required
                              data-ng-model="formData.email" /&gt;
                          &lt;div class="invalid-feedback"&gt;Please enter a valid email.&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group row"&gt;
                      &lt;label class="col-2 col-form-label"&gt;Contact Method&lt;/label&gt;
                      &lt;div class="col-lg-2 col-md-3 col-xs-4"&gt;
                          &lt;label class="custom-control custom-radio"&gt; &lt;input
                              id="radio1" name="email" type="radio"
                              class="custom-control-input" checked="checked"
                              data-ng-model="formData.pref"&gt; &lt;span
                              class="custom-control-indicator"&gt;&lt;/span&gt; &lt;span
                              class="custom-control-description"&gt;Email&lt;/span&gt;
                          &lt;/label&gt; &lt;label class="custom-control custom-radio"&gt; &lt;input
                              id="radio2" name="phone" type="radio"
                              class="custom-control-input" data-ng-model="formData.pref"&gt;
                              &lt;span class="custom-control-indicator"&gt;&lt;/span&gt; &lt;span
                              class="custom-control-description"&gt;Phone&lt;/span&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group row"&gt;
                      &lt;label for="full-name" class="col-lg-2 col-md-3 col-xs-4 col-form-label"&gt;Body&lt;/label&gt;
                      &lt;div class="col-lg-10 col-md-9 col-xs-8"&gt;
                          &lt;textarea rows="15" class="form-control"
                              placeholder="Type your message here..." id="body-text" required
                              data-ng-model="formData.body"&gt;&lt;/textarea&gt;
                          &lt;div class="invalid-feedback"&gt;Please enter a message here.&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="text-center"&gt;
                      &lt;button ng-disabled="contactForm.$invalid" class="btn-primary btn" type="submit"&gt;Submit&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>angular.js</p>
  
  <pre><code>    &lt;!-- SCRIPTS --&gt;
  &lt;script&gt;
      //form validate
  
      var app = angular.module('contactUs', []);
      app.controller('formCtrl', function($scope, $http) {
          $scope.formData = {};
          $scope.postForm = function() {
              $('#loadingScreen').modal('show');
              $http({
                  url : '/api/v1/contact',
                  method : 'POST',
                  data : $.param($scope.formData),
                  headers: {'Content-Type': 'application/x-www-form-urlencoded'}
              })
              .then(function onSuccess() {
                  console.log("success");
                  window.scrollTo(0,0);
                  $('#success-message').show();
              }, function onError(){
                  console.log("error");
                  window.scrollTo(0,0);
                  $('#error-message').show();
              })
              .then(function() {
                  $('#loadingScreen').modal('hide');
              })
          }
          $scope.formData = {};
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Looking at other errors I made sure that the ng-show was using the formName.inputName and that the app and controller were working correctly. The button is disabled correctly when the form is invalid which leads me to believe that the controller and app are not the problem.</p>
  
  <p>I tried using ng-messages which changed my phone portion of the form to</p>
  
  <pre><code>&lt;div class="form-group row"&gt;
                      &lt;label for="phone-number" class="col-lg-2 col-md-3 col-xs-4 col-form-label"&gt;Phone
                          Number&lt;/label&gt;
                      &lt;div class="col-lg-10 col-md-9 col-xs-8"&gt;
                          &lt;input class="form-control" type="tel"
                              placeholder="(630) 555-6723" id="phone-number" required
                              data-ng-model="formData.phone" name="phone" ng-minlength="10"/&gt;
                              &lt;/div&gt;
                          &lt;div ng-messages="contactForm.phone.$error" class="error" ng-if="contactForm.phone.$dirty"&gt;
                              &lt;div ng-message="required"&gt;Please enter a phone number we can reach you at.&lt;/div&gt;
                              &lt;div ng-message="pattern"&gt;Please enter a valid phone number here.&lt;/div&gt;
                              &lt;div ng-message="minlength"&gt;Please enter a phone number that's atleast 10 digits&lt;/div&gt;
                          &lt;/div&gt;
  
                  &lt;/div&gt;
  </code></pre>
  
  <p>Angular is still adding the correct classes to the input but it is still not displaying. I believe the ng-if is evaluating false. Oddly, when I run</p>
  
  <pre><code>{{contactForm.phone.$dirty}} 
  </code></pre>
  
  <p>in the console it is coming back as undefined</p>