Articles → ANGULAR.JS → Nested controllers in angular.js

Nested controllers in angular.js






Nested controllers




var app = angular.module('app', []);
        app.controller('outer_controller', function ($scope) {
            
        });
        app.controller('inner_controller', function ($scope) {
        });




<div ng-controller="outer_controller" ng-app="app">
            <div ng-controller="inner_controller" ng-app="app">
            </div>
</div>




var app = angular.module('app', []);
        app.controller('outer_controller', function ($scope) {
            $scope.name = "karan";
        });
        app.controller('inner_controller', function ($scope) {
        });




<div ng-controller="outer_controller" ng-app="app">

                {{name}}
            <div ng-controller="inner_controller" ng-app="app">

                {{name}}
            </div>
    </div>





Click to Enlarge



<div ng-controller="outer_controller" ng-app="app">

                {{name}}

                <input type="text" ng-model="name" />
            <div ng-controller="inner_controller" ng-app="app">

                {{name}}
            </div>
</div>





Click to Enlarge



<div ng-controller="outer_controller" ng-app="app">

                {{name}}

                
            <div ng-controller="inner_controller" ng-app="app">
            <input type="text" ng-model="name" />
                {{name}}
            </div>
</div>





Click to Enlarge




Dot notation




var app = angular.module('app', []);
        app.controller('outer_controller', function ($scope) {
            $scope.name = 
            {first_name:"karan"};
        });
        app.controller('inner_controller', function ($scope) {
});




<div ng-controller="outer_controller" ng-app="app">

                {{name.first_name}}

                
            <div ng-controller="inner_controller" ng-app="app">
            <input type="text" ng-model="name.first_name" />
                {{name.first_name}}
            </div>
</div>





Posted By  -  Karan Gupta
 
Posted On  -  Sunday, October 11, 2015

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250