I can't figure out how to trigger animations on a nested ngRepeat with Angular.
The CSS class ".test" is animated. When using ".test" on the inner ngRepeat it doesn't work (Plunker):
<div ng-repeat="section in sections">
<div ng-repeat="item in section.items" class="test">
<h2>{{item.title}}</h2>
</div>
</div>
When using ".test" on the outer ngRepeat it does work (Plunker):
<div ng-repeat="section in sections">
<div ng-repeat="item in section.items" class="test">
<h2>{{item.title}}</h2>
</div>
</div>
You probably need to add ngAnimateChildren attribute on the parent container, and update the css as well.
Try:-
and
Plnkr
Found this from the doc
Even though there is no animation on the parent repeat, it seems like
ng-animate
just ignores any further animation on its children.