If we have multiple modules and controller in single page i.e. :
<div id=”id1” ng-app="App1" ng-controller="productController"> </div> <div id=”id2” ng-app="app2" ng-controller="orderController"> </div>
We need to add angular.bootstrap after adding the controllers:
var App1 = angular.module(App1, []); mySampleApp.controller(productController, function($scope) {}); var App2 = angular.module(App1, []); mySampleApp.controller(orderController, function($scope) { }); angular.bootstrap(document.getElementById("id1 "), [‘App1’]); angular.bootstrap(document.getElementById("id2 "), [‘App2’]);
Using this we can add multiple controllers and modules on a single page.