angularjs - ディレクティブの AngularJS アニメーションがページの読み込み時に実行されない

Question

/ の場所から離れたときに div を 200 ピクセル高く移動するアニメーションをトリガーするディレクティブがあります。/ の場所が開始点である限り、これはうまく機能しますが、別のルートから開始すると、addClass に到達しますが、実行されません。

angular.module('app').
directive('topPosition', ['$location', '$animate', '$rootScope', function (location, $animate,     $rootScope) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        scope.location = location;
        scope.$watch('location.path()', function (newPath) {
            if (newPath !== '/') {
                $animate.addClass(element, 'higher');
            } else {
                $animate.removeClass(element, 'higher');
            }
        });
    }
}
}])

アニメーションコード

angular.module('app')
.animation(".higher", function () {
    return {
        addClass: function (element, className, done) {
            TweenMax.to(element,1, { y: '-200' });
        },
        removeClass: function (element, className , done) {
            TweenMax.to(element, 1, {y: 0});
        }
    }
});

ここで何が間違っていますか？