title: AngularJS How to dynamically add HTML and bind to controller
body: <p>I'm just getting started with angularJS and struggling to figure out proper architecture for what I'm trying to do.  I have a single page app but <strong>the URL always should stay the same</strong>; I don't want the user to be able to navigate to any routes beyond the root.  In my app, there is one main div that will need to host different views.  When a new view is accessed, I want it to take over the display in the main div.  Views loaded in this way can be throw-away or stick around as hidden in the DOM - I'm interested in seeing how each might work.</p>
  
  <p>I've come up with a rough working example of what I'm trying to do.  <a href="http://plnkr.co/edit/2mtezdA9P9dkixzbvELU?p=preview">See working example here in this Plunk.</a>  Basically I want to dynamically load HTML into the DOM and have standard angularJS controllers be able to hook into that new HTML.  Is there a better/simpler way to do this than by using the custom directive I have here and using $compile() to hook up to angular?  Perhaps there's something sort of like the router, but doesn't require URL has changes to operate?</p>
  
  <p>Here's the special directive I'm using so far (taken from another SO post):</p>
  
  <pre><code>// Stolen from: http://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html-strings-from-database
  myApp.directive('dynamic', function ($compile) {
    return {
      replace: true,
      link: function (scope, ele, attrs) {
        scope.$watch(attrs.dynamic, function(html) {
          if (!html) {
              return;
          }
          ele.html((typeof(html) === 'string') ? html : html.data);
          $compile(ele.contents())(scope);
        });
      }
    };
  });
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Andy</p>