title: AngularJS: External Modal Templates
body: <p>I read <a href="https://stackoverflow.com/questions/28114745/agularjs-include-external-html-file-into-modals">Agularjs - include external html file into modals</a>, but it didn't include much code or explanation and just pointed to docs that I've read.  So, I will go into more detail.</p>
  
  <p>I have a main html file for a SPA (Single Page Application).  I want to use modals for more detailed views.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset='utf-8'&gt;
      &lt;script src="js/angular.js"&gt;&lt;/script&gt;
      &lt;script src="js/angular-ui-bootstrap-modal.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
  &lt;/head&gt;
  &lt;body ng-app="MyApp" ng-controller="MyCtrl"&gt;
  
  &lt;button class="btn" ng-click="open()"&gt;Open Modal&lt;/button&gt;
  
  &lt;!-- want this to be in a separate html file --&gt;
  
  &lt;div modal="showModal" close="cancel()"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h4&gt;Modal Dialog&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;p&gt;Example paragraph with some text.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-success" ng-click="ok()"&gt;Okay&lt;/button&gt;
          &lt;button class="btn" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my app.js file:</p>
  
  <pre><code>var app = angular.module("MyApp", ["ui.bootstrap.modal"]);
  
  app.controller("MyCtrl", function($scope) {
  
    $scope.open = function() {
      $scope.showModal = true;
    };
  
    $scope.ok = function() {
      $scope.showModal = false;
    };
  
    $scope.cancel = function() {
      $scope.showModal = false;
    };
  
  });
  </code></pre>
  
  <p>What would I need to add to <code>app.js</code> in order for it to be able to display external html files as modals on my main html page?</p>