$ viewContentLoaded запускается перед завершением всех вызовов функции ajax в представлении angularjs

Question

Я создал код для отображения батончика в моем представлении.Проблема здесь в том, что у меня есть функция вызовов ajax для заполнения datatables на моей html-странице, но пользовательский интерфейс готов, поэтому она запускает функцию $ViewContentLoaded, чтобы скрыть панель сливочного масла.Но мне нужно показывать эту строку, пока все ajax вызовы и представление не будут полностью обработаны. Я пробовал с SetTimeout Но я думаю, что это неправильный способ сделать это.Как этого добиться?Заранее спасибо.

angular.module('app')
  .directive('uiButterbar', ['$rootScope', '$anchorScroll', function ($rootScope, $anchorScroll) {
      return {
          restrict: 'AC',
          template: '<span class="bar"></span>',
          link: function (scope, el, attrs) {
              el.addClass('butterbar hide');
              scope.$on('$stateChangeStart', function (event) {
                  $anchorScroll();
                  el.removeClass('hide').addClass('active');
              });
              scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState) {
                  event.targetScope.$watch('$viewContentLoaded', function () {
                      setTimeout(function () { el.addClass('hide').removeClass('active'); }, 5000);
                  })
              });
          }
      };
  }]);