title: Angular class change directive doesn't work
body: <p>I want to add a directive that will do something when an element class is changed.</p>
  
  <p>My directive is:</p>
  
  <pre><code>(function (angular) {
  
  angular.module('myApp')
      .directive('myClassWatch', myClassWatch);
  
  function myClassWatch() {
      return {
          restrict: 'A',
          link: function (scope, element, attrs, controller) {
              scope.$watch(function () {
                  return element.attr('class');
              }, function (newValue, oldValue) {
                  debugger;
                  if(oldValue !== newValue)
                      console.log('class changed from ' + oldValue + ' to ' + newValue);
              });
          }
      }
  }
  })(angular);
  </code></pre>
  
  <p>The html is:</p>
  
  <pre><code>&lt;div class="top-icons-item popup-container popup-link-container" my-class-watch&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I do some actions elsewhere that toggles the class "open" in my div element - it is visible in the html - yet the debugger is never called (also no console logs of course). I can see that the link function is called on page load and the debugger also stops, but thats only on page load and not afterwards when I actually do actions that adds another class.</p>
  
  <p>I have read several issued here before including <a href="https://stackoverflow.com/questions/21679534/directive-observe-class-attribute-change-caught-only-once">Directive : $observe, class attribute change caught only once</a> but I can't understand why I don't get the same result. What can I do to try check why this occures?</p>
  
  <p>Update: The class change is made using jQuery not in a controller but in an old jquery watches code. May this be cause? could angular be unaware of class change when its not done from an angular code?</p>