nested ng-app Controller proglem

Question

i want to use ng-app in another ng-app (nested). and i have controller for each app ,controllers have same name
code is here :

<!DOCTYPE html>
<html>
<head>
<script src="/scripts/angular.js"></script>
<script src="/scripts/Controller1.js"></script>
<script src="scripts/Controller2.js"></script>
</head>
<body ng-app="MasterApp">
    <div ng-controller="myController as myCtr">
        {{myCtr.testValue}} --->  controler 1
        <div ng-app="DetailApp">
            <div ng-controller="myController as myCtr">
                {{myCtr.testValue}}  ----> controller 2
            </div>
        </div>
    </div>
</body>
</html>

Controlle1.js Code :

 var MasterApp = angular.module("MasterApp", ["DetailApp"]);
MasterApp.controller("myController", function ()
 {
    var myCtr = this; 
    myCtr.testValue = " a value from Master App ";
});

Controller2.js Code :

var DetailApp = angular.module("DetailApp", []);
DetailApp.controller("myController", function () 
{
    var myCtr = this;
    myCtr.testValue = " a value from Detail App ";
});

now! controller 2 return value of controller 1!

Result :

a value from Master App
a value from Master App

this is my problem, any idea?

Did you try to give a different alias to second controller? Instead of myCtr, try something like myInnerCtr — Bunyamin Coskuner, Jun 24 '17 at 10:47
yes, when i change the controller name it worked but i wont change it, its in another app! — Mehdi Azadi, Jun 24 '17 at 10:49

score 0 · Answer 1 · answered Jun 24 '17 at 10:56

Here is what angularjs docs says about, so what you try to do is not possible.

AngularJS applications cannot be nested within each other.

https://docs.angularjs.org/api/ng/directive/ngApp

But some people found a workaround. Check this post

Can I use one ng-app inside another one in AngularJS

nested ng-app Controller proglem

1 Answers1