title: AngularJs: Why does scope inside my directive not update when async data arrives?
body: <p>I have a directive with isolate scope which takes a scope variable by reference</p>
  
  <pre><code>angular.module('myApp')
      .directive('myDirective', function() {
          return {
              scope: {
                  items: '='
              },
              templateUrl: 'template.html',
              replace: true,
              controller: 'myDirectiveCtrl',
              controllerAs: 'ctrl'
          };
      })
      .controller('myDirectiveCtrl', function($scope) {
          this.items = $scope.items;
      });
  </code></pre>
  
  <p>This is passed in like so:</p>
  
  <pre><code>    &lt;div my-directive items='items'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>In the external controller data is asynchronously loaded and the scope items passed into the directive updated:</p>
  
  <pre><code>angular.module('myApp', [])
    .controller('myCtrl', function($scope) {
  
      $scope.setItems = function() {
        $scope.items = [
          'Here',
          'There',
          'Everywhere'
        ];
      };
    });
  </code></pre>
  
  <p>When the data is loaded, the scope outside my directive updates, but inside it doesn't</p>
  
  <p>My html:</p>
  
  <pre><code>      &lt;div my-directive items='items'&gt;&lt;/div&gt; &lt;!-- this doesn't update --&gt; 
  
        Outside directive
        &lt;ul ng-repeat='i in items'&gt;            &lt;!-- this does update --&gt;
          &lt;li&gt;{{i}}&lt;/lu&gt;
        &lt;/ul&gt;
  
        &lt;button ng-click="setItems()"&gt;Set items&lt;/button&gt;
  </code></pre>
  
  <p>How can I get my scope inside my directive to update? Do I </p>
  
  <p><a href="http://plnkr.co/edit/naeLLpY1JGyGZyvrxmkL?p=preview" rel="noreferrer">Plunker here </a></p>