AngularJS Multiple ng-app within a page

Question

I have just started learning Angular JS and created some basic samples however I am stuck with the following problem.

I have created 2 modules and 2 controllers.

Answer 1

To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap()

HTML

    ...



    ...

JS

angular.
  bootstrap(document.getElementById("module2"), ['mySecondModule']);

---

The reason for this is that only one AngularJS application can be automatically bootstrapped per HTML document. The first ng-app found in the document will be used to define the root element to auto-bootstrap as an application.

In other words, while it is technically possible to have several applications per page, only one ng-app directive will be automatically instantiated and initialized by the Angular framework.