title: Angular Charts.js: Can't refresh chart with data
body: <p>I am new to charts/angular, and it's been a long time since I used javascript. I'm trying to use a factory in Angular to grab data from a server and use it to populate a chart (which uses Angular Charts, a wrapper around Charts.js). I can populate it originally with fake data, but changing it at all causes the chart to go blank. Do I have some sort of scoping issue here? Here's the relevant code:</p>
  
  <pre><code> .controller("LineCtrl", ["$scope", "HRDataPointFactory", function ($scope, HRDataPointFactory) {
  
          //The following lines cause the chart to populate, but obviously I dont care about this fake data.
          //$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
          //$scope.series = ["Series A", "Series B"];
          //$scope.data = [
          //    [65, 59, 80, 81, 56, 55, 40],
          //    [28, 48, 40, 19, 86, 27, 90]
          //];
          $scope.onClick = function(points, evt) {
              console.log(points, evt);
          };
  
  
          $scope.data = [[]];
          $scope.labels = [];
          $scope.series = ["Department"];
  
          $scope.getData = function() {
              HRDataPointFactory.getData($scope.department, $scope.dt1, $scope.dt2)
                  .then(function (data) {
  
                      var i;
                      for (i = 0; i &lt; data.data.length; i++) {
                          $scope.data[0].push(data.data[i].EmployeeCount);
                      }
  
                      for (i = 0; i &lt; data.data.length; i++) {
                          $scope.labels.push(data.data[i].Date);
                      }
  
                  });
          }
  
          /*unrelated stuff here*/
      }
  ])
  .factory("HRDataPointFactory", function HRDataPointFactory($http) {
      var exports = {};
  
      exports.getData = function(deptKey, start, end) {
          var config = {
              params: { departmentKey: deptKey, startTime: start, endTime: end  }
          }
  
          return $http.get("/HR/Data", config)
              .then(function(response) {
                  console.log(response);
                  return response;
              },function(data) {
                  console.log("There was an error!", data);
                  return response;
              });
      };
  
      return exports;
  });
  </code></pre>
  
  <p>And the html:</p>
  
  <pre><code>&lt;canvas id="line" class="chart chart-line" chart-data="data"
          chart-labels="labels" chart-legend="true" chart-series="series"
          chart-click="onClick"&gt;
  &lt;/canvas&gt;
  </code></pre>
  
  <p>Thank you for the help!</p>