Angular ng-repeat messing up when replacing array

Question

I have an ng-repeat in my app and observe the following behaviour: When the data structure behind the ng-repeat is replaced, the ng-repeat renders some elements double for a short time, then resumes to the normal state. This will confuse my users and looks awful. Any Idea what could cause this behaviour?

Here is a video: I click "Favourisieren" and watch the items in the left sidebar change. The mouse cursor is not visible.

https://nimbus.everhelper.me/client/notes/share/video/317494/o1sARUDmxVOzUZoD4LhyJ0PxsUMTC6cn/none/wz61446123052707/video.webw

And here is the source code of the ng-repeat in question. The data structure of user.favourited_term is just a plain array of objects.

        <li ng-if='user && user.favourited_terms' ng-repeat="termOrCategory in user.favourited_terms">
            <a ng-click="handleMenuClick($event)">
                <i class="fa fa-star-o"></i>
                <span class="menu-item">
                    <h2>{{termOrCategory.term.name}}</h2>
                </span>
            </a>
        </li>

Answer 1

I found a fix for the duplicate data. Since i had no track by statement in my code, angular tracked the array items by array index automatically. This does not work when new Items are inserted.

The problem can easily be solved by inserting a track by statement, that identifies an object in the list uniquely, like an id. In my case this was a little bit more complicated, normally just a track by e. g. yourObjectName.id is enough

ng-repeat="termOrCategory in user.favourited_terms track by termOrCategory.term.id + termOrCategory.is_category"