title: AngularJS: Can I manual boolstrap modules into multiple elements without side effects?
body: <p>We have a web site that manually bootstraps an angular module onto the document level.  There are multiple controllers in this module on each page.  This is not a single page application and it has a traditional menu and different pages load different controllers.</p>
  
  <p>That setup has served us well over the past couple years, but now we are adding a new controller for faceted search and it uses html5Mode=true.  That had the effect of taking over all of the links on the site.</p>
  
  <p>One solution was to create a directive to dynamically apply a target to each link on the site.  Angular doesn't take over links with targets. We didn't like this solution because the site uses different targets in various locations.</p>
  
  <p>The solution we implemented involved grouping the controllers under modules.  Since Angular doesn't allow nested modules we are bootstrapping each module via classes (i.e. any given page could have multiple modules containing several controllers).</p>
  
  <p><strong>Here is what is looks like:</strong></p>
  
  <pre><code>angular.element(document).ready(function () {
      angular.bootstrap($('.moduleA'), ['moduleA']);
      angular.bootstrap($('.moduleB'), ['moduleB']);
  });
  </code></pre>
  
  <p><strong>Main Question:</strong></p>
  
  <p>The bootstrapping idea surprising works, but I'm not knowledgeable of the inner workings to understand if bootstrapping this way is negative.  Some pages have the same module boostrapped 4 or 5 times into different divs.  It works, but is it okay?</p>
  
  <p>e.g. Does this create a ton of overhead or other side effects?</p>