directives.js

angular.module('DocteurDodo').directive("rollImageIn", function($animateCss, $compile){
    return function(scope, element, attrs) {
        var duration = scope.$eval(attrs.rollImageIn).duration;
        var delay = scope.$eval(attrs.rollImageIn).delay;
        var rollOutDuration = scope.$eval(attrs.rollImageIn).rollOutDuration;
        var rollOutDelay = scope.$eval(attrs.rollImageIn).rollOutDelay;
        var nextStep = scope.$eval(attrs.rollImageIn).nextStep;
        $animateCss(element,{
            from    : {width:0, height:0},
            to      : {width:'300px',height:'300px'},
            duration: duration,
            delay: delay
        })
        .start()
        .then( onComplete());

        function onComplete(){
            element.attr('roll-image-out', '{duration:'+rollOutDuration+', delay: '+rollOutDelay+', nextStep: '+nextStep+'}');
            $compile(element, scope);
        }
    };
});
angular.module('DocteurDodo').directive("rollImageOut", function($animateCss){
    return function(scope, element, attrs) {
        var duration = scope.$eval(attrs.rollImageOut).duration;
        var delay = scope.$eval(attrs.rollImageOut).delay;
        var nextStep = scope.$eval(attrs.rollImageOut).nextStep;

        console.log(duration);
        console.log(delay);
        console.log(nextStep);
        $animateCss(element,{
            from    : {width:'300px', height:'300px'},
            to      : {width:0,height:0},
            duration: duration,
            delay: delay
        })
            .start()
            .then( onComplete );

        function onComplete() {
            if(nextStep){
                console.log(scope);
            }
        }
    };
});