title: Angular UI Bootstrap modal display during $http request
body: <p>I am trying to create a directive that uses angular ui bootstrap modal. I would like to open this directive from my controller when a $http request is made, and close it when the request resolves. I'm new to angular and a bit stuck. Here's what I've got so far.</p>
  
  <p>expedition.html controller:</p>
  
  <pre><code>.controller('ExpeditionCtrl', ['$http', 'UserFactory', '$scope',
      function ($http, UserFactory, $scope) {
          var vm = this;
          vm.totalItems;
          vm.itemsPerPage = 100;
          vm.currentPage = 1;
          vm.pageChanged = pageChanged;
          vm.content = [];
          vm.loadingInstance;
          vm.open;
          fetchPage();
  
          function pageChanged() {
              fetchPage();
          }
  
          function fetchPage() {
  
              $http.get('myapi?page=' + vm.currentPage + "&amp;limit=" + vm.itemsPerPage)
                  .then(function(response) {
                      angular.extend(vm.content, response.data.content);
                      vm.content = response.data.content;
                      vm.totalItems = response.data.totalElements;
                  })
          }
  
      }
  </code></pre>
  
  <p>expedition.html:</p>
  
  <pre><code>&lt;div class="section"&gt;
      &lt;div class="sectioncontent"&gt;
          // some html
  
              &lt;uib-pagination total-items="vm.totalItems" ng-model="vm.currentPage" ng-change="vm.pageChanged()" items-per-page="vm.itemsPerPage"&gt;&lt;/uib-pagination&gt;
  
          &lt;/div&gt;
          &lt;loading-modal loadingInstance="vm.loadingInstance" open="vm.open"&gt;&lt;/loading-modal&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>loadingModal.directive.js:</p>
  
  <pre><code>.directive('loadingModal', ['$uibModal',
      function($modal) {
          return {
              transclude: true,
              restrict: 'EA',
              template: '&lt;div ng-init="open()"&gt; Test Loading &lt;/div&gt;',
              scope: {
                  loadingInstance: "=",
                  open: "="
              },
              link: function(scope, element, attrs) {
  
                  scope.open = function(){
  
                      scope.loadingInstance = $modal.open({
                          templateUrl: 'app/templates/loadingModal.tpl.html',
                          controller:  scope.useCtrl,
                          size: 'sm',
                          windowClass: 'app-modal-window',
                          backdrop: true,
  
                      });
                      scope.loadingInstance.result.then(function(){
                          scope.initialized = true;
                          console.log('Finished');
                      }, function(){
                          scope.initialized = true;
                          console.log('Modal dismissed at : ' + new Date());
                      });
                  };
              }
          };
      }]);
  </code></pre>
  
  <p>loadingModal.tpl.html:</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
      Loading ....
  &lt;/div&gt;
  </code></pre>