Untitled

<!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 Directive</h1>
    <parent class="parent">
    </parent>
  </body>

</html>

angular.module('App', [])
  .directive('parent', function () {
    return {
      restrict: 'E',
      scope: {},
      template: '<h2>Parent directive</h2>' +
        '<ul>' +
          '<li ng-repeat="item in items">{{ item }}</li>' +
        '</ul>' + 
        '<child class="child"></child>',
      controller: function ($scope, $interval) {
        $scope.items = ['foo', 'bar'];
        $interval(function () {
          $scope.items.push('item ' + ($scope.items.length + 1));
        }, 3000);
        
      }
    };
  })
  .directive('child', function () {
    return {
      restrict: 'E',
      template: '<h2>Child directive</h2>' +
        '<ul>' +
          '<li ng-repeat="item in items">{{ item }}</li>' +
        '</ul>'
    };
  })

.parent {
  border: red 1px solid;
  border-radius: 5px;
  padding: 10px;
  display: block;
}

.child {
  border: blue 1px solid;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  display: block;
}

Steps

* initial parent controller with list
* list from the parent shown in the child controller
* move items to separate service
* broke connection between items in the scope and the service
* breaking connection after timeout by overwriting reference
* preserving the returned reference
* controllers to directives