Is it possible to use nested controllers in AngularJS? When using nested controllers, is the $scope object shared across all controllers?
The issue at hand is:-
While I can access the $scope values of the first controller across all controllers, I am unable to retrieve the scope objects of the second controller in the third controller. You can test this using the snippet provided below.
var app = angular.module("appTest",[]);
function Controller1($scope) {
$scope.text1= "Sample Text 1"
}
function Controller2($scope) {
$scope.text2= "Sample Text 2"
}
function Controller3($scope) {
$scope.text3 = $scope.text1 + " And " + $scope.text2;
}
app.controller("Controller1",Controller1);
app.controller("Controller2",Controller2);
app.controller("Controller3",Controller3);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="appTest">
<div ng-controller="Controller1">
<div>
<h1> First Controller</h1>
Values in the First Controller are <b> {{text1}}</b>
</div>
<div ng-controller="Controller2">
<h1> Second Controller</h1>
Values in the First Controller are <b> {{text1}}</b>
<br />
Value in the Second Controller is <b> {{text2}}</b>
</div>
<div ng-controller="Controller3">
<h1> Third Controller</h1>
Combination of values from First Controller and Second Controller is <b> {{text3}}</b>
</div>
</div>
</body>