title: Angular: Call Modal in different file
body: <p>I have a modal which can be called from different pages. So, I need that in different HTML and JS files. </p>
  
  <p>fileA.html and fileA.js are main while fileB.html and fileB.js have the modal. 
  When I am trying to call it I am getting error. </p>
  
  <p>fileA.html</p>
  
  <pre><code>&lt;button type="button" class="btn btn-success" ng-click='openModal()' &gt;&lt;i class="fa fa-sign-out"&gt;&lt;/i&gt;Modal&lt;/button&gt;
  </code></pre>
  
  <p>fileA.js</p>
  
  <pre><code>angular.module('query').controller('Modal2Ctrl', function ( .... ){
  $scope.openModal = function (){
  
      var modalInstance = $modal.open({
          templateUrl: '/#/data/modal/modal1.html',
          windowClass: 'modal',
          controller: 'ModalCtrl',
          resolve: {
              object : $scope.qid,
          }
      });
   };
   }
  </code></pre>
  
  <p>fileB.html:</p>
  
  <pre><code>&lt;div ng-controller=""&gt; or &lt;script type="text/ng-template" id="modal.html"&gt;
      &lt;!-- Modal Header --&gt;
      &lt;!-- Modal Body --&gt;
      &lt;!-- Modal Footer --&gt;
  </code></pre>
  
  <p>fileB.js</p>
  
  <pre><code>angular.module('export').controller('Modal1Ctrl', function ($scope, $rootScope, $modal, $log, $compile, $timeout, $modalInstance, ...){ ... }
  </code></pre>
  
  <p>I would like to use fileB.html and fileB.js on different pages. 
  Any advice on how to call the modal?</p>