How do I bootstrap multiple modules to display on same page with Angular.js

Question

I have looked on the Google groups, angularjs.org as well as some serious Googling but I am not finding any clear examples or explanation for what I'm trying to do.

What I am trying to do is break my application into views using multiple modules. I know from reading online you need to manually bootstrap but I'm still not getting it write

I currently have 2 modules "thermostatApp" and "PeopleApp", and I want to attach them to their own containers shown below:

<div id="thermostatApp_container">
    <div data-ng-include="'modules/thermostat/thermostat.html'"/> 

  </div> 

  <div id="peopleApp_container">
    <div data-ng-include="'modules/people/people.html'"/> 

  </div>

what I was trying to do was to bootstrap to each container element like so:

angular.element($('#peopleApp_container')).ready(function() {
         angular.bootstrap($('#peopleApp_container'), ['peopleApp']);
       });

 angular.element($('#thermostatApp_container')).ready(function() {
         angular.bootstrap($('#thermostatApp_container'), ['thermostatApp']);
       });

This isn't working for me, I know you can attach multiple modules using an array of modules but How do you specif a element to bootstrap it to? Is it possible to do what I'm describing? If not what is the best way to approach it? I do want to keep modules as separated as possible.

Answer 1

I feel very Silly! I did't need to attach to specific elements, I just attached to the document and passed an array of modules like so:

angular.element(document)).ready(function() {
    angular.bootstrap(document, ['peopleApp','thermostatApp']);
});