I am learning how to implement Bootstrap modals in AngularJS. I can do it when the modal code (the actual popup window code) is on the main page, but I want to be able to display external files so that my SPA isn't super-cluttered.  I am implementing this on a much larger scale, but for simplicity's sake I'll keep the code example to a minimum.<html>  <head>    <meta charset='utf-8'>    <script src=js/angular.js></script>    <script src=js/angular-ui-bootstrap-modal.js></script>    <script src=js/app.js></script>    <link rel=stylesheet href=css/bootstrap.css>  </head>  <body ng-app=MyApp ng-controller=MyCtrl>    <button class=btn ng-click=open()>Open Modal</button>    <!-- want this code to be an external.html file -->    <div modal=showModal close=cancel()>      <div class=modal-header>          <h4>Modal Dialog</h4>      </div>      <div class=modal-body>          <p>Example paragraph with some text.</p>      </div>      <div class=modal-footer>        <button class=btn btn-success ng-click=ok()>Okay</button>        <button class=btn ng-click=cancel()>Cancel</button>      </div>    </div>    <!-- -->  </body></html>app.jsvar 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;  };});I know that I need to add a templateUrl to my app.js, but don't know how I would bridge the gap between the three files (index.html, app.js, and external.html).
Bootstrap Modals
javascript;angular.js;twitter bootstrap