title: AngularJS : Watch for class change not working
body: <p>Any ideas why angular watch did not work when class is added with jquery timeout function. The idea is that when jquery is fored to change class: angular to catch that new class. Working example in fiddle. When you scroll down you will see catched changing of class
  Solved: <a href="http://jsfiddle.net/11kyd4to/" rel="nofollow">Fiddle</a></p>
  
  <pre><code>&lt;div ng-app='myApp'&gt;
      &lt;div ng-controller="Ctrl" class="holder"&gt;
          &lt;div class="pusher"&gt;&lt;/div&gt;
          &lt;table id="table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                  &lt;th class="ui sticky gar" ng-repeat="friend in friends" add-remove-class&gt;{{friend.name}}&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;&lt;/tbody&gt;
          &lt;/table&gt;
         &lt;div class="pusher"&gt;&lt;/div&gt;
          &lt;div class="pusher"&gt;&lt;/div&gt;
          &lt;div class="ui sticky" id="gar" add-remove-class&gt;Garrrrr&lt;/div&gt;
      &lt;/div&gt;
      &lt;p class="footer" ng-class="wohooOrNoo"&gt;footer&lt;/p&gt;
  &lt;/div&gt;
  
  
  
   var myApp = angular.module('myApp', []);
      myApp.controller("Ctrl", function ($scope, $timeout) {
          $('#gar').sticky();
          $('gar').sticky();
  
         $scope.friends = [
        {name:'John', age:25, gender:'boy'},
        {name:'Jessie', age:30, gender:'girl'},
        {name:'Johanna', age:28, gender:'girl'},
        {name:'Joy', age:15, gender:'girl'},
        {name:'Mary', age:28, gender:'girl'},
        {name:'Peter', age:95, gender:'boy'},
        {name:'Sebastian', age:50, gender:'boy'},
        {name:'Erika', age:27, gender:'girl'},
        {name:'Patrick', age:40, gender:'boy'},
        {name:'Samantha', age:60, gender:'girl'}
      ]
      });
  
      myApp.directive('addRemoveClass', function () {
          return {
              link: function link(scope, element, attrs) {
  
                  // create an observer instance
                  var observer = new MutationObserver(function (mutations) {
                      scope.$apply(function () {
                          if (element.hasClass('fixed')) {
                              alert("wee");
                          }
                      });
                  });
  
                  // configuration of the observer:
                  var config = {
                      attributes: true
                  };
  
                  // pass in the target node, as well as the observer options
                  var node = element.get(0);
                  observer.observe(node, config);
              }
          };
      });
  </code></pre>