title: Angular directive not getting updated controller data
body: <p>I have a form where one of the selects is a field that the data comes from an array generated by the backend.</p>
  
  <p>The issue I have is the controller has an empty array to store the data. 
  This array then gets populated by the request to the backend. The only issue is the directive is not using the updated data it only uses the empty array that is created on the controller.</p>
  
  <p>I have used this directive from the attached plunkr. <a href="http://plnkr.co/edit/J7bQoSKe17VQ5i6RPxps?p=info" rel="nofollow noreferrer">http://plnkr.co/edit/J7bQoSKe17VQ5i6RPxps?p=info</a></p>
  
  <p>The setTimeout is acting like my ajax call.</p>
  
  <pre><code>     //Very big arry that will become all the available choices.
    vm.allItems = [];
  
    // 'Loaded' after time to act like async ajax request to server.
    setTimeout(function(){
      for (var i = 0; i &lt; 9500; i++) {
      var person = {
        name: 'Adam' + i,
        email: 'adam' + i + '@email.com',
        age: 12,
        country: 'United States'
      };
      vm.allItems.push(person);
      }  
      document.getElementById('status').innerHTML = 'Loaded: ' + vm.allItems[4].name + ' and others.';
    }, 1500);
  </code></pre>
  
  <p>I was just testing with updating the status element to see when the data should be present.</p>
  
  <p>Any help appreciated! Thanks in advance.</p>