Source Code

AngularJS Nested Controller Example

AngularJS: Nested Controllers and Models syntax with Example

Here is a simple Example for sharing data between nested two or more controllers without any sacrificing design quality

Message: {{message1}}
First Message: {{message1}}
Second Message: {{message2}}
Second Message: {{message2}}
{{message2}}

Example : index.html


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app="liveApp">
    <div ng-controller="firstCtrl">
        Message:  <b>{{message1}} </b>
        <div ng-controller="secondCtrl">
            First Message: <b>{{message1}}</b> </br>
            Second Message: <b>{{message2}}</b>
        </div>
        Second Message: <b>{{message2}}</b>
    </div>
	<hr/>
	<div ng-controller="lastCtrl">
	{{message2}}
	<div>
</body>
</html>

Example : App.js


         var liveApp = angular.module('liveApp', []);

        liveApp.controller('firstCtrl', function ($scope) {
            $scope.message1 = "This is firstCtrl";
        });

        liveApp.controller('secondCtrl', function ($scope) {
            $scope.message2 = "This is secondCtrl";
        });
		
		liveApp.controller('lastCtrl', function ($scope) {
            $scope.message2 = "This is lastController";
        });