title: AngularJS Slightly Advanced Validation / Bootstrap3 Style
body: <p>I am in the process of learning AngularJS, still at the most basic stages of form validation. I followed the <a href="https://docs.angularjs.org/guide/forms" rel="nofollow noreferrer">official tutorial here</a>, and managed to get the validation working like they have, where if input is invalid, the background changes colour.</p>
  
  <p><img src="https://i.stack.imgur.com/7oYKU.jpg" alt="Bootstrap Style Form"></p>
  
  <p>That is all nice and counts as an important step in my learning, but how do I move a little further and have the validation add / remove CSS classes required by Bootstrap to show visual cues?</p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;form novalidate class="css-form"&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="control-label" for="fname"&gt;First Name&lt;/label&gt;
      &lt;input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required &gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="control-label" for="lname"&gt;Last Name&lt;/label&gt;
      &lt;input type="text" id="lname" placeholder="Last Name" class="form-control" ng-model="user.lname" required &gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="control-label" for="email"&gt;Email&lt;/label&gt;
      &lt;input type="email" id="email" placeholder="Email" class="form-control" ng-model="user.email" required &gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="control-label" for="password"&gt;Password&lt;/label&gt;
      &lt;input type="password" id="password" placeholder="Password" class="form-control" ng-model="user.password" required &gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="control-label" for="emailpref"&gt;Want annoying emails?&lt;/label&gt;
      &lt;select class="form-control" ng-model="user.emailpref" required&gt;
        &lt;option value="Null"&gt;Please Select&lt;/option&gt;
        &lt;option value="Yes"&gt;Yes&lt;/option&gt;
        &lt;option value="No"&gt;No&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>In the <a href="http://getbootstrap.com/css/#forms" rel="nofollow noreferrer">Bootstrap3 documentation</a>, it says that if I need to show a valid state, I must add a CSS class of <code>has-success</code> like so:</p>
  
  <pre><code>&lt;div class="form-group has-success"&gt;
      &lt;label class="control-label" for="fname"&gt;First Name&lt;/label&gt;
      &lt;input type="text" id="fname" placeholder="First Name" class="form-control" ng-model="user.fname" required &gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I get my AngularJS validation to do that? At the moment, my AngularJS is as follows:</p>
  
  <pre><code>function UserCtrl($scope) {
      $scope.master = {};
      $scope.user   = { fname: "J", lname: "Watson", password: "test", email: "j.watson@world.com", emailpref: "Yes" };
  
      $scope.update = function(user) {
          $scope.master = angular.copy(user);
      };
  
      $scope.reset = function() {
          $scope.user = angular.copy($scope.master);
      };
  
      $scope.reset();
  }
  </code></pre>