Staggering Animations are great! But I don’t get it to work without user interaction.

There is a total normal ng-repeat list:

<div ng-controller="controller">    
    <div class="category" ng-repeat="category in categories">

Defined in a controller:

var controller = function($scope) {
  $scope.categories = ['12345', '6789', '9876', '54321'];

And a few CSS Rules for animation:

.category.ng-enter {
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
.category.ng-enter-stagger {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
.category.ng-enter.ng-enter-active {
  /* standard transition styles */

But on page load its displayed without animation. I inserted a button for replacing the categories array with random numbers and it fades in just fine.

What do I have to do to get the animation to work, when the user visits the page the first time?

Demo is here: http://plnkr.co/edit/3zXENPbYA3cxJQ3Pyb34?p=preview

I found some answers that hacking around with $timeout() but I get an animation only on the first item. And it don’t feel well.