在角度ui bootstrap模式中添加Ajax加载器

Question

我有ui bootstrap模式播放视频，这些视频需要时间加载，所以我想显示ajax加载器，直到视频加载。

这是我的模板的ng-template和angular js代码，我添加了ajax loader但是我没有得到如何停止加载。我想在视频完全加载时停止加载。感谢

 <script type="text/ng-template" id="video_gallery.html">
  <div class="modal-content col-md-12" >
    <div class="modal-header">
      <h4 class="modal-title" style="text-align:center;">Videos of {{hall_videos[0].hall_name}} Hall</h4>
    </div>
    <div class="modal-body " >
    <div ng-if="hall_videos==0">
      <h4 style="font-weight:bold;font-family:Bitstream Charter;">Sorry! No Videos Found to Display.</h4>
    </div>
    <div  class="col-md-4 col-md-offset-0" ng-repeat = "video in hall_videos" class="col-md-8">
      <h5>Video Name: {{video.video_name}}</h5>
      <div>
        <img id="spn"  ng-src="<?=base_url()?>images/ajax-loader.gif"  style="position: absolute;left: 35%;top: 45%;"></img>
        <iframe  allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" id="player" type="text/html" width="200" height="200"
           src="//www.youtube.com/embed/{{video.video_code}}" frameborder="2">
        </iframe>
      </div>
    </div>
  </div>
  <div class="col-md-12"><br><br></div>
</div>
  <div class="modal-footer"><br>
    <div class=" ">
      <a href="<?=base_url()?>hall/calender/{{hall_videos[0].hall_info_id}}"><button class='btn btn-success'>Book Now</button></a>
      <button class="btn btn-warning" ng-click="cancel()">cancel</button>
    </div>
  </div>
</script>

这是我的模态

的js代码

 $scope.open = function (size, id) {
  $scope.hall_videos = hall_videos;
  var modalInstance = $modal.open({
    templateUrl: 'video_gallery.html',
    controller: HomeCtrl1,
    size: size,
      backdrop: true,
    resolve: {
      videos: function () {
        var videos = [];
        angular.forEach($scope.hall_videos, function(video) {
          if (video.hall_info_id === id) {
            videos.push(video);
          }
        });
        return videos;
      }
    }
  });
};
var HomeCtrl1 = function ($scope, $modalInstance, videos) {
  $scope.hall_videos = videos;
  $scope.selected = {
    hall_videos: $scope.hall_videos
  };
  $scope.ok = function () {
    $modalInstance.close($scope.selected.hall_videos);
  };
  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};