Angularjs tab Loading spinner while rendering

Question

I have a page with some tabs and each tab has large amount of angularjs bindings.This is sample page where i am facing issue.Each tabs take about 10 seconds to render.

Answer 1

I would STRONGLY recommend reading this SO thread first, written by the author of AngularJS himself which addresses the root problem.

Delaying AngularJS route change until model loaded to prevent flicker

Misko asks then answers his own question regarding this topic by suggesting the use of $routeProvider, like so:

 $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html', 
        controller: PhoneListCtrl, 
        resolve: PhoneListCtrl.resolve}). // <-- this is the connection when resolved
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html', 
        controller: PhoneDetailCtrl, 
        resolve: PhoneDetailCtrl.resolve}).
      otherwise({redirectTo: '/phones'});

Here is the finished product/solution you are seeking, which is an enhanced version of the AngularJS phone demo:

http://mhevery.github.io/angular-phonecat/app/#/phones

This requires NgRoute(), but is the correct approach. Using a $timeout here seems kind of hacky to me - Im not saying you need ngRoute however I am not sure how to pull it off without it (and I DO realize that your tabs may not be routed currently but I hope it helps anyways).

Furthermore, may also find using angular.element(document).ready(function(){}); for your initial payload will also solve your woahs.

angular.element(document).ready(function(){
  $('.loading').remove(); // Just an example dont modify the dom outside of a directive!
  alert('Loaded!');
});

As you can see no $timeout(function(){}); is used either approach, here is proof of the angular.element.ready() works - without a router:

WORKING DEMO http://codepen.io/nicholasabrams/pen/MwOMNR

*if you reaaally need me to I can make some tabs up but you didn't give a working code sample in your post so I used another demo I made for another thread to show the solution.

HERE IS YET ANOTHER SOLUTION, this time I used your example!

http://jsfiddle.net/eRGT8/1069/

This time I fire a function when the $index === $last (last element in ngRepeat()) this way the loader is removed from the dom or hidden when the repeat is finished doing its business)