Nested ng-repeat animation

Question

I have been trying to animate a list of elements divided by rows(the parent ng-repeat) and the columns(the child ng-repeat). I have achieved the animation that I wanted with singly ng-repeats. The problem is that when using the same animation with nested ng-repeats, the animation isn't quite what I expected it to be. Here is the PLUNKER that I'm currently working on. If anyone can point me to the right direction, I would greatly appreciate it.

Answer 1

The animation scope used for staggering is tied to a unique ID stored on the parent of the animated element. By default, this is auto-generated the first time it is used. By setting this manually to the same value for several different elements, the animations in those elements can be staggered even though they have different parents. Note that this technique uses internal implementation details of AngularJS-Animation and may not work in future versions

Here is the directive which overrides the animation scope ID. Apply it to the parent of the animated elements. (example)

.directive('forceAnimationScope', function()
{
  return {
    restrict: 'A',
    link: function(scope, element, attributes) {
      element.data('$$ngAnimateKey', attributes.forceAnimationScope);
    }
  };
});