angular-charts.js不会使用新数据正确更新

Question

图表HTML

<!-- the data-component is a block where theres a chart
     and a table. Since the table doesn't ever have issues,
     it always displays the real async data...
     but because the chart wont render my async data,
     I start it off with some fake data so I can see it -->
<div class="data-component">
  <canvas id="bar"
    class="chart chart-bar"
    data="data"
    labels="labels">

  <table>
   ... the real data ...
  </table>
</div>

初始（假）数据：

$scope.data= [
    [1,2,3]
];
$scope.labels = [1,2,3];
$scope.series = ['field1'];

结果如下：

数据更新：

$http.get( _url )
  .success(function(distribution) {
  $scope.loading = false;
  console.log(distribution);
  var seriesData = [];
  var labels = [];
  for(var i in distribution)
  {
    var step = distribution[i];

    //This is the data returned
    //[{"segment":null,"count":308,"percentage":0.77},
    //{"segment":1,"count":16346,"percentage":40.71},
    //{"segment":2,"count":13186,"percentage":32.84},    
    //{"segment":3,"count":10309,"percentage":25.68}]

    seriesData.push(step.count);
    labels.push(step.segment || "null");
  }

  $scope.distribution = distribution;

  $scope.data = [seriesData];
  $scope.labels = labels;
  $scope.series = ["Field2"];

})
.error(function() {});

结果如下：

有谁知道为什么数据的异步更新会导致它什么都没有渲染？