指令中的AngularJS动画未在页面加载时运行

Question

我有一个指令触发一个动画，当远离/位置移动div高出200px时。只要/ location是我们的起点，这种方法效果很好，但是从另一个路径开始时，仍然会到达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});
        }
    }
});

我在这里做错了什么？