<!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