title: Why does angular-chartjs update works in $timeout callback but not in async callback?
body: <p>I've got a angular-chartjs barchart on my page:</p>
  
  <p>And I initialise it with some data:</p>
  
  <pre><code>$scope.data= [
    [1,2,3,4]
  ];
  $scope.labels = [1,2,3,4];
  $scope.series = ['field1'];
  </code></pre>
  
  <p>And if I add a datapoint after a couple seconds, the chart happily updates:</p>
  
  <pre><code>$timeout(function() {
      console.log('timeout');
      $scope.labels.push('');
      $scope.data[0].push(9);
  }, 2000);
  
  //the data gains a 9, and the chart updates and now has 5 bars,
  //rather than 4.
  </code></pre>
  
  <p>But if I try to do the same thing inside of an async callback, something goes terribly wrong, and the chart fails to render altogether.</p>
  
  <pre><code>$http.get( _url_ ).then(function(res) {
       $scope.labels.push('');
       $scope.data[0].push(9);
  });
  //perhaps something goes wrong behind the scenes with $scope.data
  //because the chart wont load now
  </code></pre>
  
  <p>Why is it that doing stuff inside of the callback for the ajax request makes the chart unhappy?</p>
  
  <p>Edit: <a href="http://plnkr.co/edit/eVKWwCu54tlxPsXpqqJz" rel="nofollow">here's a plunker</a>, but for some reason, it works fine in the plunker but not in the real application.</p>