<!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>
</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>
</div>
</body>
</html>
angular.module('App', [])
.controller('Parent', function ($scope) {
$scope.items = ['foo', 'bar'];
})
.controller('Child', function ($scope) {
});
.parent {
border: red 1px solid;
border-radius: 5px;
padding: 10px;
}
.child {
border: blue 1px solid;
border-radius: 5px;
padding: 10px;
}
Steps
* `step - 0` initial parent controller with list