Share Models Between Nested Controllers
Description
The following code shows how to share Models Between Nested Controllers.
Example
<!doctype html>
<html ng-app="MyApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script>
var app = angular.module("MyApp", []);
<!--from w ww. j a v a 2 s . c o m-->
app.controller("MyCtrl", function($scope) {
$scope.name = "XML";
$scope.user = {
name: "CSS"
};
});
app.controller("MyNestedCtrl", function($scope) {
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Object</label>
<input type="text" ng-model="user.name">
<div class="nested" ng-controller="MyNestedCtrl">
<label>Nested Primitive</label>
<input type="text" ng-model="name"><br/>
<label>Primitive with explicit $parent reference</label>
<input type="text" ng-model="$parent.name"><br/>
<label>Object</label>
<input type="text" ng-model="user.name">
</div>
</div>
</body>
</html>