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}}


Example : index.html

<!DOCTYPE html>
<script src=""></script>
<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>
        Second Message: <b>{{message2}}</b>
	<div ng-controller="lastCtrl">

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";