angular-scroll-animate does not work when scrolling

I'm developing a mobile application using angular, and I'm trying to build a timeline like this:

link documentation here: link

The problem is that the angular-scroll-animate directive is not firing when there is page-rolling, and I have no idea what it can be, here's my code:

Controller:

angular.module('timeline', [
'angular-timeline',
'angular-scroll-animate'
])
.controller("TimeLineController", [
    "$scope",
    function ($scope) {
        $scope.events = [
            {
                badgeClass: 'warning',
                badgeIconClass: 'ion-information',
                title: 'titulo',
                content: 'conteúdo'
            },
            {
                badgeClass: 'danger',
                badgeIconClass: 'ion-heart',
                title: 'titulo',
                content: 'conteúdo'
            },
            {
                badgeClass: 'primary',
                badgeIconClass: 'ion-android-calendar',
                title: 'titulo',
                content: 'conteúdo'
            }
        ];

        $scope.animateElementIn = function ($el) {
            $el.removeClass('hidden');
            $el.addClass('animated fadeInRight '); // this example leverages animate.css classes
        };

        $scope.animateElementOut = function ($el) {
            $el.addClass('hidden');
            $el.removeClass('animated fadeOutRight '); // this example leverages animate.css classes
        };
    }]);

CSS

<style>
    .hidden { visibility: hidden; }
</style>

HTML

<ion-view view-title="Linha do Tempo">
<ion-content>
    <timeline>
        <timeline-event ng-repeat="(key,event) in events" side="">
            <div when-visible="animateElementIn" when-not-visible="animateElementOut" delay-percent="0.50" class="hidden">
                <timeline-badge class="{{event.badgeClass}}">
                    <i class="glyphicon {{event.badgeIconClass}}"></i>
                </timeline-badge>
                <timeline-panel class="{{event.badgeClass}}">
                    <timeline-heading>
                        <h4>{{key+1}}º - {{event.title}}</h4>
                    </timeline-heading>
                    <p>{{key+1}}º - {{event.content}}</p>
                </timeline-panel>
            </div>
        </timeline-event>
    </timeline>
</ion-content>

Sorry if I did not follow any rules with the question I'm starting now Thanks in advance for your help!