title: Monitor for class changing on element in AngularJS directive
body: <p>When a class is added to an element, I want to add another class to that element. When a class is removed, I want to remove an element. I'm basically mapping some bootstrap classes to some angular form validation classes but I can't figure out how to fire my code when a class is added/removed from an element (also making sure not to cause some infinite loop of class changing).</p>
  
  <p>Here is what I have thus far for my directive:</p>
  
  <pre><code>.directive('mirrorValidationStates', ['$log', function($log) {
    function link(scope,element,attrs) {
      scope.$watch(element.hasClass('someClass'), function(val) {
        var classMap = {
          'popupOn': 'has-error',
          'ng-valid': 'has-success'
        };
  
        for (var key in classMap) {
          if (element.hasClass(key)) {
            $log.info("setting class " + classMap[key]);
            element.parent().addClass(classMap[key]);
          } else {
            $log.info("removing class " + classMap[key]);
            element.parent().removeClass(classMap[key]);
          }
        }
      });
    }
    return {
      link: link
    };
  }]);
  </code></pre>
  
  <p>So basically, when <code>popupOn</code> is added to an element, I want to add the <code>has-error</code> bootstrap class to the parent element. When <code>popupOn</code> is removed, I want to remove <code>has-error</code>.</p>
  
  <p>What am I missing to make this happen in Angular? Maybe something with ng-class and not use a directive?</p>
  
  <p>Thanks much!</p>