AngularJS animation in directive not running on page load

Question

I have a directive that triggers an animation that moves a div 200px higher when moving away from the the / location. This works well as long as the / location is our starting point, but when starting from another route, the addClass is still reached, but not executed.

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

The animation code

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

What am I doing wrong here ?