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>