title: AngularJS: Dynamically loading HTML with a controller
body: <p>I'm new to AngularJS and I'm working on a small project to get the hang of how things work.</p>
  
  <p>Basically I want to have a single-page app where I can dynamically change part of the page to include html from some other file.  This other file has a controller and such.  I would like the url to stay the same.  I need the page to be loaded dynamically with a variable name.</p>
  
  <p>Right now, I can get the HTML to load from the imported template, but a lot of HTML is excluded and all of the "ng" tags are gone.  I take this to mean that this new page can't find the controller or a lot of the stuff is getting compiled out or something. Maybe I'm not importing things in the correct order?  I have no idea. Here's my basic layout:</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var app = angular.module('myApp', []);
  app.controller('Main', function($scope) {
      $scope.htmlContent = 'somepage.html';
      $scope.externalPage = 'otherpage';
      $scope.changePage = function(page) {
          $scope[page]();
      }
      $scope.otherpage = function() {
          $scope.htmlContent = 'otherpage.html';
      }
  });
  
  app.controller('InternalPage', function($scope) {
      alert('hello world');
      $scope.content = "This is not showing";
  });
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;div ng-controller="Main"&gt;
      &lt;!-- This all works.  Clicking "Change Page" changes the 
           HTML referenced by the &lt;div&gt; tag --&gt;
  
      &lt;a ng-click="changePage(externalPage)"&gt;Change Page&lt;/a&gt;
      &lt;div ng-bind-html="htmlContent"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>otherpage.html</strong></p>
  
  <pre><code>&lt;div ng-controller="InternalPage"&gt;
      &lt;p&gt;{{content}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried including the javascript in the html file itself to no avail.  I also could not get the ng-include thing to work either.</p>