title: AngularJS Modal not showing up when templateUrl changes
body: <p>So far, what I have is straight off the Angular UI example:</p>
  
  <p>Controller:</p>
  
  <pre><code>var ModalDemoCtrl = function ($scope, $modal) {
  
    $scope.open = function () {
  
      var modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: ModalInstanceCtrl
      });
    };
  };
  
  
  var ModalInstanceCtrl = function ($scope, $modalInstance) {
  
    $scope.close = function () {
      $modalInstance.dismiss('cancel');
    };
  };
  </code></pre>
  
  <p>And this section, which is just in sitting in the .html for the whole page this modal is on.
  Html:</p>
  
  <pre><code>&lt;script type="text/ng-template" id="myModalContent.html"&gt;
    &lt;div class="modal-header"&gt;
      &lt;h3 class="modal-title"&gt;I'm a modal!&lt;/h3&gt;
      &lt;button class="btn btn-warning" ng-click="close()"&gt;X&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      Stuff
    &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>This works just fine. But I'm trying to refactor some things out and organize my code, so I would like to move the modal html to its own file. When I do so, and try to use it as by changing the templateUrl to the path: <code>\tmpl\myModalContent.html</code>, it doesn't show up. The backdrop still appears and inspecting the page shows that it loaded correctly, but just won't show up.</p>
  
  <p>I've tried changing the css for the modal per these <a href="https://stackoverflow.com/questions/20255347/angularjs-bootstrap-ui-modal-not-showing">suggestions</a> with no difference.</p>
  
  <p>My question is, why does this work fine if the script tag is in the main html, but not at all if it is in it's own file?</p>
  
  <p>Here is a <a href="http://plnkr.co/edit/p9qsqgMVOvT4yDmI7C0j" rel="nofollow noreferrer">plnkr</a> that shows what I mean. If you copy what is in the template.html and place it right above the button in the index.html file, it works...</p>