I am trying to utilize ng-app with in another ng-app. Separately both ng-app's are perform their function but as they come inside each other it creates an error. for example
<body ng-app>
<div ng-app="MyApp" ng-controller="MyCtrl">
-----
</div>
<div ng-controller="ctrl">
........
</div>
</body>
On execution this give Error
Argument 'MyCtrl' is not a function, got undefined
If any one have any solution for this issue, or have some other technique to solve this problem, please help me.
AngularJS applications cannot be nested within each other. What you need to do is to design your modules in a way that such a thing is not needed. (eg. use nested controllers or split your app into separate modules)
Look into this topic from AngularJS website, it's explicitly mentioned that apps cannot be nested :
https://docs.angularjs.org/api/ng/directive/ngApp
To get a better sense about breaking an angular app into several modules take a look at these resources :
https://www.safaribooksonline.com/blog/2014/03/27/13-step-guide-angularjs-modularization/
There's only one ng-app allowed. There can be many modules it relies on.
Example:
//app.js
angular.module('app',['subApp'])
.run(() => { ... })
//meanwhile in subapp.js
angular.module('subapp', [])
.run(() => { ... })
