title: Angular Bootstrap modal is loading whole page into the modal (13.0)
body: <p>I'm following the documentation for <a href="http://angular-ui.github.io/bootstrap/versioned-docs/0.13.0/#/modal" rel="nofollow noreferrer">Bootstrap AngularJS 13.0</a></p>
  
  <p>I not allowed to update bootstrap (for various reasons).</p>
  
  <p>I've copied the documentation almost exactly but I'm getting the following effect (the whole site is being loaded into the modal, ignore black boxes):</p>
  
  <p><a href="https://i.stack.imgur.com/XJSDA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XJSDA.jpg" alt="Boot strap problem, ignore black boxes."></a></p>
  
  <p>My code is as follows:</p>
  
  <p><strong><em>navbar.html</em></strong></p>
  
  <pre><code>&lt;!-- Options drop down for not logged in. --&gt;
          &lt;div ng-hide="UserInfoService.isLoggedIn()" class="navbar-options pull-right" dropdown keyboard-nav dropdown-toggle&gt;
              &lt;ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav"&gt;
                  &lt;li role="menuitem"&gt;&lt;a ng-click="openRegisterModal();"&gt;{{'Register' | translate}}&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="divider"&gt;&lt;/li&gt;
                  &lt;li role="menuitem"&gt;&lt;a href="#"&gt;{{'Login' | translate}}&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong><em>Navbar controller, this includes the injected</em></strong> <code>$modal</code></p>
  
  <pre><code>$scope.openRegisterModal = function() {
          $modal.open({
              animation: true,
              templateUrl: 'register-modal.html',
              controller: 'RegisterModalController',
              size: 'sm'
          });
      };
  </code></pre>
  
  <p><strong><em>Register modal template, in it's own file</em></strong></p>
  
  <pre><code>&lt;div ng-controller="RegisterModalController"&gt;
  &lt;script type="text/ng-template" id="register-modal.html"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h3 class="modal-title"&gt;I'm a modal!&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          Test body
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          Test footer
      &lt;/div&gt;
  &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Register modal controller, the console log is called once on open.</p>
  
  <pre><code>'use strict';
  
  //Instance of register modal.
  angular.module('passionForgeApp').controller('RegisterModalController', ['$scope',  function ($scope) {
  
      console.log('Did load RegisterModalController');
  
  }]);
  </code></pre>
  
  <p>I cannot figure out why the modal is loading the whole site in it :-/</p>