Angular ng-repeat animation on delete

Problem

I am trying to create an add\remove animation in an ng-repeat (with css transitions). For some reason the fade out effect always happens at the bottom of the list and not on the item you choose to delete (for example try deleting the first item , the effect shows at the bottom) . Here's a plunkr http://plnkr.co/edit/XdGHKhf5z5BQMaYk1Naz?p=preview

Any thoughts ?

Problem courtesy of: Joel_Blum

Solution

If you remove

track by $index

, then it should be all right. just:

<div ng-repeat="item in items" class="repeat-item">
Solution courtesy of: Jacek Kolasa

Discussion

Use a simple ng-repeat: "item in items" in this way works fine.

Check this plunker

Discussion courtesy of: Atropo

This recipe can be found in it's original form on Stack Over Flow.