ngAnimate to detect changes from $http-call with interval

I have an array with a few items in it. Every x seconds, I receive a new array with the latest data. I check if the data has changed, and if it has, I replace the old one with the new one:

if (currentList != responseFromHttpCall) {
    currentList = responseFromHttpCall;
}

This messes up the classes provided by ng-animate, as it acts like I replaced all of the items -- well, I do actually, but I don't know how to not.

These changes can occur in the list:

There's one (or more) new item(s) in the list - not necessaryly at the end of the list though.
One (or more) items in the list might be gone (deleted).
One (or more) items might be changed.
Two (or more) items might have been swapped.

Can anyone help me in getting ng-animate to understand what classes to show? I made a small "illustation" of my problem, found here: http://plnkr.co/edit/TS401ra58dgJS18ydsG1?p=preview

Thanks a lot!

Solution

To achieve what you want, you will need to modify existing list on controller (vm.list) on every action. I have one solution that may work for your particular example.

you would need to compare 2 lists (loop through first) similar to:

vm.list.forEach((val, index)=>{
  // some code to check against array that's coming from ajax call
});

in case of adding you would need to loop against other list (in your case newList):

 newList.forEach((val, index)=>{
   // some code to check array on controller
 });

I'm not saying this is the best solution but it works and will work in your case. Keep in mind - to properly test you will need to click reset after each action since you are looking at same global original list which will persist same data throughout the app cycle since we don't change it - if you want to change it just add before end of each function:

original = angular.copy(vm.list);

You could also make this more generic and put everything on one function, but for example, here's plnkr:

http://plnkr.co/edit/sr5CHji6DbiiknlgFdNm?p=preview

Hope it helps.