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>