title: AngularJS & Bootstrap Modal - loading template outside controller
body: <p>I have a dialog which is being used in 3 scenarios within the same page.  I have created a controller similar to the below:</p>
  
  <pre><code>var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    size: size,
    resolve: {
      items: function () {
        return $scope.items;
      }
    }
  });
  
  
   &lt;script type="text/ng-template" id="myModalContent.html"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h3 class="modal-title"&gt;Im a modal!&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;ul&gt;
              &lt;li ng-repeat="item in items"&gt;
                  &lt;a ng-click="selected.item = item"&gt;{{ item }}&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          Selected: &lt;b&gt;{{ selected.item }}&lt;/b&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-primary" ng-click="ok()"&gt;OK&lt;/button&gt;
          &lt;button class="btn btn-warning" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>The issue is, that since this dialog is being used in 3 different parts of the same page, I have a problem with the template.  When I put the html template outside of the controller, at the very end of the page html, it fails and gives me a 404.</p>
  
  <p>However, I do not wish to repeat the same chunk of HTML in 3 places in the same page.  Can someone tell me if there's a different way of calling the template which is outside the controller?</p>