AngularJs中使用Controller與Link中使用CharJs異步加載問題

1.正在做一個(gè)后臺(tái)管理頁面，通過$http異步加載數(shù)據(jù)，數(shù)據(jù)加載完成后，顯示統(tǒng)計(jì)數(shù)據(jù)，效果如下圖：

加載完成后試圖：

2.現(xiàn)在遇到一個(gè)問題：

$http請求寫在Controller里，在異步加載完成以前給了圖表一個(gè)假數(shù)據(jù)，等異步加載完以后去除加載動(dòng)畫把真實(shí)數(shù)據(jù)顯示出來。但是異步加載完以后頁面數(shù)據(jù)還是顯示假數(shù)據(jù)，并沒有更新。

3.Html代碼：

<div id="homeBarData" ng-controller="chartJsCtrl as chart">
    <canvas barchart options="chart.barOptions" data="chart.barData" 
        height="70" responsive=true></canvas>
</div>

4.Controller代碼：

var last_seven_days = [getDateStr(-7), getDateStr(-6), getDateStr(-5), getDateStr(-4), getDateStr(-3), getDateStr(-2), getDateStr(-1)];
var successNum = [10, 20, 30, 40, 50, 60, 70];
var failNum = [70, 60, 50, 40, 30, 20, 10];
this.barData = {
    labels: last_seven_days,
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: successNum
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(26,179,148,0.5)",
            strokeColor: "rgba(26,179,148,0.8)",
            highlightFill: "rgba(26,179,148,0.75)",
            highlightStroke: "rgba(26,179,148,1)",
            data: failNum
        }
    ]
};
$http({
    method: 'post',
    url: '/getDatas'
}).then(function (response) {
    $timeout(function () {
        successNum = response.data.firstData;
        failNum = response.data.secondData;
    })
});

5.Link代碼：

var angles = angular.module("angles", []);

angles.chart = function (type) {
    return {
        restrict: "A",
        scope: {
            data: "=",
            options: "=",
            id: "@",
            width: "=",
            height: "=",
            resize: "=",
            chart: "@",
            segments: "@",
            responsive: "=",
            tooltip: "=",
            legend: "="
        },
        link: function ($scope, $elem) {
            var ctx = $elem[0].getContext("2d");
            var autosize = false;

            $scope.size = function () {
                if ($scope.width <= 0) {
                    $elem.width($elem.parent().width());
                    ctx.canvas.width = $elem.width();
                } else {
                    ctx.canvas.width = $scope.width || ctx.canvas.width;
                    autosize = true;
                }

                if ($scope.height <= 0) {
                    $elem.height($elem.parent().height());
                    ctx.canvas.height = ctx.canvas.width / 2;
                } else {
                    ctx.canvas.height = $scope.height || ctx.canvas.height;
                    autosize = true;
                }
            }

            $scope.$watch("data", function (newVal, oldVal) {
                if (chartCreated)
                    chartCreated.destroy();

                // if data not defined, exit
                if (!newVal) {
                    return;
                }
                if ($scope.chart) {
                    type = $scope.chart;
                }

                if (autosize) {
                    $scope.size();
                    chart = new Chart(ctx);
                };

                if ($scope.responsive || $scope.resize)
                    $scope.options.responsive = true;

                if ($scope.responsive !== undefined)
                    $scope.options.responsive = $scope.responsive;

                chartCreated = chart[type]($scope.data, $scope.options);
                chartCreated.update();
                if ($scope.legend)
                    angular.element($elem[0]).parent().after(chartCreated.generateLegend());
            }, true);

            $scope.$watch("tooltip", function (newVal, oldVal) {
                if (chartCreated)
                    chartCreated.draw();
                if (newVal === undefined || !chartCreated.segments)
                    return;
                if (!isFinite(newVal) || newVal >= chartCreated.segments.length || newVal < 0)
                    return;
                var activeSegment = chartCreated.segments[newVal];
                activeSegment.save();
                activeSegment.fillColor = activeSegment.highlightColor;
                chartCreated.showTooltip([activeSegment]);
                activeSegment.restore();
            }, true);

            $scope.size();
            var chart = new Chart(ctx);
            var chartCreated;
        }
    }
}
angles.directive("barchart", function () {
    return angles.chart("Bar");
});