AngularJS animation directive chain -

i'm learning angularjs , trying create 2 directives. directives allows me animate images, respectively: rollimagein resizes image 0 300px rollimageout resizes image 300px 0px.

i trigger second directive when first 1 complete.

here's directives: https://gist.github.com/egavard/f9cd6b6faf140fb77f130c4ca98cc1be

and here's template: https://gist.github.com/egavard/923cc37b0240baaa2d5a1ff5608e10d4

i able go on problem pasting second animation in first animation callback create simple , reusable directives.

does have idea of i've mistaken ?

i found mistakes here:

• first of all, invalid $compile call:

$compile(element)(scope)

• then, doc recommands use .done() callback instead of then().

    .done( function(){       element.attr('roll-image-out', '{duration:'+rolloutduration+', delay: '+rolloutdelay+', nextstep: '+nextstep+'}');       element.removeattr('roll-image-in');       $compile(element)(scope);      });

it's working correctly.