Angular Charts.js: Can't refresh chart with data
<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>