title: Angular.js validation. Programatically set form fields properties
body: <p>I'm trying to set up a form validation systems with angular as follows.</p>
  
  <p>An error class is assigned when the field is both $invalid &amp;&amp; $dirty.</p>
  
  <p>This works great for individual fields. Here is an example field.</p>
  
  <pre><code>&lt;div class="control-group" ng-class="getErrorClasses(schoolSignup.first_name)"&gt;
        &lt;label class="control-label" for="first_name"&gt;First Name&lt;/label&gt;
         &lt;div class="controls"&gt;
              &lt;input type="text" class="input-xlarge" id="first_name" name="first_name" required ng-maxlength="30" ng-model="school.first_name"&gt;
              &lt;span class="help-inline" ng-show="showError(schoolSignup.first_name, 'required')"&gt;This field is required&lt;/span&gt;
              &lt;span class="help-inline" ng-show="showError(schoolSignup.first_name, 'maxlength')"&gt;Maximum of 30 character allowed&lt;/span&gt;
          &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p><code>schoolSignup</code> is the name of the form.</p>
  
  <p><code>ng-class="getErrorClasses(schoolSignup.first_name)"&gt;</code> is defined in the controller as</p>
  
  <pre><code>$scope.getErrorClasses = function(ngModelContoller) {
          return {
              error: ngModelContoller.$invalid &amp;&amp; ngModelContoller.$dirty
          };
      };
  </code></pre>
  
  <p>And on the error help items <code>ng-show="showError(schoolSignup.first_name, 'required')"</code> is defined as:</p>
  
  <pre><code>$scope.showError = function(ngModelController, error) {
        return ngModelController.$dirty &amp;&amp; ngModelController.$error[error];
    };
  </code></pre>
  
  <p>This all works fine.</p>
  
  <p>However, what I want to do is make it so if the user clicks the submit button and all the individual fields that are required are invalid then show the <code>required</code> error message next to the appropriate fields.</p>
  
  <p>This will require setting all the individual fields to <code>$dirty</code> and the <code>$error['required']</code> value to <code>true</code> based on this system.</p>
  
  <p>I have set up a directive on the submit button called <code>can-save</code> as follows which has access to the form.</p>
  
  <pre><code>&lt;button class="btn btn-primary btn-large" type="submit" can-save="schoolSignup"&gt;Register&lt;/button&gt;
  </code></pre>
  
  <p>-</p>
  
  <pre><code>.directive('canSave', function () {
      return function (scope, element, attrs) {
  
          var form = scope.$eval(attrs.canSave);
  
          var valid = false;
  
          element.click(function(){
              if(!valid)
              {
                  // show errors
  
                  return false;
              }
  
              return true;
          });
  
          scope.$watch(function() {
              return form.$dirty &amp;&amp; form.$valid;
          }, function(value) {
              valid = !!value;
          });
      }
  
  });
  </code></pre>
  
  <p>This all works except for making the errors show as desired. </p>
  
  <p>Any ideas on how to achieve this would be appreciated.</p>