title: Why bootstrap *multiple* Angular modules to a *single* element
body: <p>The angular <a href="https://docs.angularjs.org/api/ng/function/angular.bootstrap" rel="nofollow noreferrer">documentation for the <code>angular.bootstrap(...)</code> method</a> says the second argument is:</p>
  <blockquote>
  <p>...an <strong>array of modules</strong> to load into the application. Each item in the array should be the name of a predefined module or a (DI annotated)</p>
  </blockquote>
  <p>I had never seen Angular code which passes a <strong>more than one</strong> module in to be boostrapped to the same DOM element... Why would you want to do that? Angular tutorials don't provide an example. So I found <a href="https://stackoverflow.com/a/17837191/1175496">this example</a> on StackOverflow. This example bootstraps both <code>peopleApp</code> and <code>thermostatApp</code> to the document:</p>
  <pre><code>angular.bootstrap(document, ['peopleApp','thermostatApp']);
  </code></pre>
  <p>What happens if those apps have the same name for a controller? Like <code>MyCtrl</code>? Which definition is respected?</p>
  <p>How is boostrapping multiple modules; different than creating a new <code>ConsolidatedModule</code>, which has <em><strong>dependencies</strong> to the <strong>one or more modules</strong> you would've boostrapped</em>, and then just bootstrapping the <strong>single</strong> <code>ConsolidatedModule</code>? i.e.</p>
  <pre><code>angular.module('ConsolidatedModule', ['peopleApp', 'thermostatApp']);
  angular.bootstrap(document, ['ConsolidatedModule'])
  </code></pre>
  <p>To be clear, I'm not talking about bootstrapping <a href="https://stackoverflow.com/a/17680044/1175496">separate apps to separate DOM elements.</a> (also shown <a href="https://stackoverflow.com/a/21903382/1175496">here</a>)</p>
  <p>Other anecdotal evidence that makes me confused about this:</p>
  <ul>
  <li><p>You <a href="https://stackoverflow.com/a/18317015/1175496"><del>can't</del> shouldn't (?) bootstrap an app <strong>within</strong> another already bootstrap'd app</a> (... because</p>
  <blockquote>
  <p>&quot;traversing it's way through the DOM and setting up scope bindings and executing directive linking functions all the way through. If you do that twice, you're going to run into problems.&quot;</p>
  </blockquote>
  <p>-- and yet, bootstrapping the same element with two modules <em>won't</em> run into problems?)</p>
  </li>
  <li><p>In Angular2, <code>platformBrowserDynamic.bootstrapModule(...)</code> is singular; implies it only accepts a <strong>single argument</strong> ( I couldn't find the API), so I'm even more confused what it <em>means</em> in angular  1.* to bootstrap <em>multiple</em> modules to the same DOM node.</p>
  </li>
  </ul>