Как я могу поместить ui.bootstrap.progressbar в мои угловые таблицы данных ajax

Question

Может ли кто-нибудь помочь мне добавить некоторую полосу загрузки, пока datatable получает данные из базы данных? Это мой код что мне нужно добавить, чтобы индикатор загрузки начал загружаться при получении данных, затем индикатор выполнения удалится после загрузки всех данных в таблицу данных.

var msgTemp = angular.module("tableLOVApp", ['datatables', 'ngResource', 'datatables.bootstrap','ui.bootstrap'])
 .controller('tableLOVCtrl', tableLOVCtrl);

tableLOVCtrl.$inject = ['$scope', '$resource', '$http', '$compile', '$timeout', 'DTOptionsBuilder', 'DTColumnBuilder', 'DTColumnDefBuilder'];

function tableLOVCtrl($scope, $resource, $http, $compile, $timeout, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder){
 var vm = this;

 vm.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('ajax', {
     url : 'msgTemplate/msgTemplateList.json',
     type : 'GET',
     data : function(d){
      d.sortColumn = d.columns[d.order[0].column].data;
      d.order = d.order[0].dir;
      d.filter = d.search.value;
     }
    })
    .withOption('createdRow', function(row, data, dataIndex) {
                   $compile(angular.element(row).contents())($scope);
               })
    .withDataProp(function(json){
     json.recordsTotal = json.data.length == 0 ? 0 : json.data[0].count;
     json.recordsFiltered = json.data.length == 0 ? 0 : json.data[0].count;
     return json.data;
    })
    /*.withOption('language',{loadingRecords: "Please wait - loading..."})*/
    .withOption('fnRowCallback', rowCallback)
    .withOption('serverSide', true)
    .withOption('processing', true)
    .withDisplayLength(10)
    .withOption('scrollY', '362px')
    .withBootstrap()
    .withPaginationType('full_numbers');
 
 vm.dtColumns = [
              DTColumnBuilder.newColumn('messageCd').withTitle('Message Code'),
              DTColumnBuilder.newColumn('keyword').withTitle('Keyword'),
              DTColumnBuilder.newColumn('messageType').withTitle('Message Type')
          ];

<div ng-app="tableLOVApp" ng-controller="tableLOVCtrl as showCase">
  <div>
    <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="table row-border hover"></table>
  </div>
</div>

Это то, что я хочу сделать...