How to get component's controller's scope from animation?

Question

I've got a component with an animation defined as such:

angular
    .module('slider')
    .component('slider', {
        templateUrl: '/mytemplate.html',
        controller: function SliderController() {
            var self = this;
            self.direction = 'left';
        }
    })
    .animation('.slide-animation', function() {
        return {
            beforeAddClass: function (element, className, done) {
                var scope = element.scope();
                // The line below logs undefined???
                console.log(scope.direction);
            }
        };
    });

I'm trying to access a value from the controller's scope but it's being returned as undefined which leads me to believe I've got the wrong scope. Is that correct? How can I get the controller's scope from within the animation?

Answer 1

I was able to get the scope I was looking for with help from Genti's comment.

angular
    .module('slider')
    .component('slider', {
        templateUrl: '/mytemplate.html',
        controller: function SliderController() {
            var self = this;
            self.direction = 'left';
        }
    })
    .animation('.slide-animation', function() {
        return {
            beforeAddClass: function (element, className, done) {
                var scope = element.scope().$ctrl;
                console.log(scope.direction);
            }
        };
    });