First, the problems encountered
The problem occurs when you use AngularJS to nest controllers. Because each controller has its corresponding scope (equivalent scope, control scope), so the controller nesting, also means the scope of nesting. What happens if the Model of the same name is in two scopes at this time? How does the child scope update the Model in the parent scope?
<div ng-app= "myApp" > <div ng-controller= "Parentcontroller" > {{ parentprimitive}} <br /> {{parentobj.parentproperty}} <div ng-controller= "Childcontroller" > </div> </div></div>
var app = Angular.module (' myApp ', []); App.controller (' Parentcontroller ', function ($scope) {$scope. parentprimitive = " Some primitive "$scope. Parentobj = {}; $scope. Parentobj.parentproperty = "some value";}); App.controller (' Childcontroller ', function ($scope) {$scope. parentprimitive = "This is not modify the parent" $scope . Parentobj.parentproperty = "This would modify the parent";});
Result: output:
Some primitive
This would modify the parent
Deep understanding of the Scope of AngularJS