Предотвратить угловую директиву от вызова под нагрузкой

Скажем, у меня есть файл, структурированный следующим образом:

index.html:

<ng-header></ng-header>
<ng-body></ng-body>
<ng-footer></ng-footer>
<ng-modal></ng-modal>

Все эти директивы загружаются, когда я открываю свой index.html, но я не хочу, чтобы <ng-modal> загружался до тех пор, пока он мне не понадобится.

Я пытался сделать что-то вроде этого:

<ng-modal ng-if="showModal"></ng-modal>

и затем я бы использовал ng-click где-нибудь в <ng-body> чтобы открыть этот модальный:

scope.openModal = function() {
  scope.showModal = true;
  console.log("Modal is initialized")
}

Однако этот метод на самом деле не работает для меня, потому что он инициализирует ng-modal только один раз, а затем, когда вы снова его открываете, его уже загрузили и не будете выполнять любые HTTP-вызовы, которые я использую в моем модальном режиме.

ngModal.js:

.directive('nuMeetingCreate', function($scope) {
  return {
     restrict: 'E',
     transclude: true,
     templateUrl: '../../../whatever.html',
     link: function(scope, element, attrs) {
       console.log("I am loaded"); // gets executed only once

       contacts.get({
         onSuccess: function success(response) {
           console.log("Contacts are loaded"); // this one gets called only once!       
         }, 
         onError: function error(response) {
           console.log(response)
         }
      });
     }
  }
})