title: Toggle button class using Directive in Angular
body: <p>I want to toggle a buttons class depending on the state of a form in Angular. The template is based on Bootstrap.</p>
  
  <p>I've setup a directive called IsDirty. </p>
  
  <p>If the form has the class 'ng-valid', add the class 'btn-success' to the submit button. </p>
  
  <p>Alternatively, if the form is dirty and has the class 'ng-dirty', remove the class 'btn-success' from the submit button.</p>
  
  <p>So far this is what I have but it doesn't work.</p>
  
  <pre><code>var angular = require('angular');
  
  angular.module('myApp')
      .directive('isDirty', [function() {
          return {
              restrict: 'E',
              link: function(scope, element, attrs, ctrl) {
                  var submitButton = element.find('.btn-primary');
  
                  if(element.hasClass('ng-valid')) {
                          submitButton.addClass('btn-success');
                  } else {
                      submitButton.removeClass('btn-success');
                  }
  
                  scope.$apply();             
              }
          };
      }]);
  </code></pre>
  
  <p>My form:</p>
  
  <pre><code>&lt;form is-dirty class="form-horizontal" role="form" name="profileForm"&gt;
  
      &lt;!-- INPUT FIELDS HERE //--&gt;
  
      &lt;button type="submit" class="btn btn-primary"&gt;Save Changes&lt;/button&gt;
      &lt;button type="reset" class="btn btn-default"&gt;Cancel&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>