AngularJS .ng-enter animation doesn't work on first run

Question

I'm have a strange problem in my AngularJS app; Animation in my tab-slides switching with ng-include, doesn't work for first time, but works good in second or third time.

Here is my test code on plunker: http://embed.plnkr.co/a2x4vkTVgEUEt9mxWaVy/preview

Looks like ng-enter animation class, setting before, template uploads. Please, help.

Answer 1

It looks like the animation isn't working as your templates are getting loaded out of turn. I recommend either using directives for implementing tabs, or ngRoute.

I have made an example with ngRoute here: http://embed.plnkr.co/RFw3CZwQmPz9doqe7o1u/preview

I'm not entirely sure what your app is supposed to do, so I may have broken your initial setup. But I see you're using a lot of rootScope. I recommend using a service for storing shared data between the controllers. Like this (using example from here: Passing data between controllers in Angular JS?)

app.service('productService', function() {
  var productList = [];

  addProduct = function(newObj) {
      productList.push(newObj);
  };
  getProducts = function(){
      return productList;
  };
});

Update: It is possible to use dynamic templateUrls in the $routeProvider, like this. This is also possible with the controller. That way you don't have to specify a seperate route for every one of your steps.