Angular catch Semantic new class

Angular catch Semantic new class

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.3/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.3/semantic.min.js"></script>
<div ng-app='myApp'>
    <div ng-controller="Ctrl" class="holder">
        <div class="pusher"></div>
        <table id="table">
            <thead>
                <tr>
                <th class="ui sticky gar" ng-repeat="friend in friends" add-remove-class>{{friend.name}}</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
       <div class="pusher"></div>
        <div class="pusher"></div>
        <div class="ui sticky" id="gar" add-remove-class>Garrrrr</div>
    </div>
    <p class="footer" ng-class="wohooOrNoo">footer</p>
</div>

CSS

.footer {
    position: absolute;
    bottom: 0px;
}
.holder {
    height: 2800px !important;
    display: block;
    float: left;
    width: 100%;
}
#gar {
    display: block;
    float: left;
    width: 100%;
}
.pusher {
    height: 50px;
    display: block;
    float: left;
    width: 100%;
}

JavaScript

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);
        }
    };
});