title: Load entire page into modal (Angular Bootstrap)
body: <p>I am trying to load a modal in my page, but when I load the page, I cannot load the "modal.html", instead, appears an exactly copy of the page in the modal.</p>
  
  <p>I have the <strong>MainController</strong> with ui.bootstrap correctly injected and this function: </p>
  
  <pre><code>$scope.loadEditForm = function () {
     var modalInstance = $modal.open({
          ariaLabelledBy: 'modal-title',
          ariaDescribedBy: 'modal-body',
          templateUrl: 'modal.html',
          controller: 'ModalController',
        });
    };
  </code></pre>
  
  <p><strong>modal.html</strong> which it is in the same directory of the controller.</p>
  
  <pre><code>&lt;div class="modal-header"&gt;
  &lt;p&gt;Hello&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>main.html</strong> page where I have the button to call the function:</p>
  
  <pre><code>&lt;button ng-click="loadEditForm()"&gt;Edit Form&lt;/button&gt;
  </code></pre>
  
  <p>And the <strong>ModalController</strong>:</p>
  
  <pre><code>angular.module('ModalController', []).controller('ModalController', function($scope, $http) {
  });
  </code></pre>
  
  <p>So the problem is that when I click the button, the modal window appear with the same content of my "main.html", but there is nothing about my "modal.html"</p>
  
  <p>If someone can help me I will be very grateful.</p>
  
  <p>Thank you!</p>
  
  <p><strong>Edited:</strong></p>
  
  <p>When I click the button, in the console appears the following:</p>
  
  <p><a href="https://i.stack.imgur.com/eyGMB.png" rel="nofollow noreferrer">Web console</a></p>