javascript - Nested ng-repeat animation -

i have been trying animate list of elements divided rows(the parent ng-repeat) , columns(the child ng-repeat). have achieved animation wanted singly ng-repeats. problem when using same animation nested ng-repeats, animation isn't quite expected be. here plunker i'm working on. if can point me right direction, appreciate it.

the animation scope used staggering tied unique id stored on parent of animated element. default, auto-generated first time used. setting manually same value several different elements, animations in elements can staggered though have different parents. note technique uses internal implementation details of angularjs-animation , may not work in future versions

here directive overrides animation scope id. apply parent of animated elements. (example)

.directive('forceanimationscope', function() {   return {     restrict: 'a',     link: function(scope, element, attributes) {       element.data('$$nganimatekey', attributes.forceanimationscope);     }   }; });