I am declaring two ng-app on the same page with a different name, but inside both ng-app I have to use common ng-controller with the same name for both the ng-app. But I am not getting the desired output. It's only initing the first ng-controller.
I tried: having only one ng-app > ng-controller is fine, but if you skip first ng-app > ng-controller (i,e. : var modules = ['secondScope']; ) and try to init second, it's showing error in the console.
HTML :
<body>
<div ng-app="firstScope">
<div ng-controller="classController">
<div>{{name}}</div>
</div>
</div>
<div ng-app="secondScope">
<div ng-controller="classController">
<div>{{name}}</div>
</div>
</div>
</body>
Script :
var modules = ['firstScope', 'secondScope'];
angular.forEach(modules, function(mod){
console.log(mod);
var myApp = angular.module(mod, []);
myApp.controller('classController', classController);
});
function classController($scope) {
console.log('classController');
$scope.name = "Child 1 Controller";
};
The problem is not with the initialization of the controller but with the module as angular initializes only one app automatically. For other app's, you need to initialize it manually as follows.