AngularJS & Bootstrap Modal - loading template outside controller

Question

I have a dialog which is being used in 3 scenarios within the same page. I have created a controller similar to the below:

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});


 <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Im a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a ng-click="selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

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.

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?

Answer 1

A good way to reuse your template is to put it in a separate html file and put its url in templateUrl. So $modal can get it from server every time needed.