title: Manually load/unload modules with angular.bootstrap?
body: <p>Here is my problem : I would like to make a single page application where AngularJS apps could be loaded/unloaded on the fly in a "main content" section, when clicking on different entries of a menu.</p>
  
  <p>But I just can't figure out how to make this. I'm always getting the <code>ng:btstrpd</code> error when using the <code>angular.bootstrap</code> function.</p>
  
  <p>I load the apps using the following code : </p>
  
  <pre><code>var mainContent = document.getElementById('main-content');
  window.loadApp = function(modules) {
      angular.bootstrap(mainContent, modules);
  }
  </code></pre>
  
  <p>Here is a jsfiddle : <a href="http://jsfiddle.net/010b62ry/" rel="nofollow">http://jsfiddle.net/010b62ry/</a></p>
  
  <p>I tried to remove the DOM element and reinsert it again but I get weird behaviors (like duplicates). I think the modules are not unloaded.
  I also have tons of <code>&lt;!-- ngView:  --&gt;</code> comments while doing so.</p>
  
  <p>Anyone has a good idea about how to implement this ? Bonus point if the memory gets released when switching from one application to another.</p>
  
  <p>PS: I really need to bootstrap 100% independant modules (who manage their own routes etc) because some of them could be developed by other people who do not have access to the source code of this application. I just need to start their modules as 100% autonomous angular applications.</p>