<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<title>Updating scopes</title>
</head>
<body ng-app="App">
<h1>Scopes to Service</h1>
<div class="parent" ng-controller="Parent">
<h2>Parent controller</h2>
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
<div class="child" ng-controller="Child">
<h2>Child controller</h2>
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
</div>
<input ng-model="newItem" />
<button ng-click="addItem(newItem); newItem = undefined;">Add new item</button>
</div>
</body>
</html>
angular.module('App', [])
.controller('Parent', function ($scope) {
$scope.items = ['foo', 'bar'];
$scope.addItem = function (x) {
$scope.items.push(x);
};
})
.controller('Child', function ($scope) {
});
.parent {
border: red 1px solid;
border-radius: 5px;
padding: 10px;
}
.child {
border: blue 1px solid;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
Steps
* initial parent controller with list
* list from the parent shown in the child controller