AngularJS only first element in ng-repeat animates

Question

For some reason using the code below, ngRepeat only animates the first item and displays the rest instantly. As soon as the scope.categories item is updated the ng-repeat is triggered in the template.

dataSource.getCategories()
    .then(function(categories) {
        $scope.categories = categories;
    }, function(message) {
        dataSource.setActivity(false, message);
    });

But if I change the code to the one below and add <a ng-click="start()">Start</a> in the page, it works. Yes, I have tried $timeout, even up to 5 seconds and it does not change the situation.

dataSource.getCategories()
    .then(function(categories) {
        $scope.start = function() {
            $scope.categories = categories;
        }

    }, function(message) {
        dataSource.setActivity(false, message);
    });

Does anyone have a solution to this?

Answer 1

I tried your CSS with AngularJS 1.2.9 and got the same result. It works with 1.2.13 however. There have been so many changes to the ngAnimate module in the 1.2.*-branches so without digging deeper into the matter my guess is it's a bug that has since been fixed.

Demo - 1.2.9 not working: http://plnkr.co/edit/WvK2DDB6wTUkjx4Ah2bs?p=preview

Demo - 1.2.13 working: http://plnkr.co/edit/50UdTAKAsua85hyLc1O6?p=preview

Answer 2

I was having the same issue (with Angular 1.2.21). My issue was that I was using !important on the transition: all 1s linear style. Try removing that and see if it works. If you needed !important in the first place, try simplifying your CSS.

Here's some plunkers to illustrate the issue I had:

• with !important http://plnkr.co/edit/T1Q8DYtNJ6NYvRtrFk10?p=preview
• without !important http://plnkr.co/edit/pftzeR1gDmKTgSnvGLgd?p=preview