Angular Chartjs How to make it reactive to data change?

Question

I'm trying to write an app that will show some data from API and during the work I will be able to change time and date range that I would like to show on the chart.

Right now I am fighting with basic data change.

I have a simple chart code: HTML:

<button type="button" class="btn btn-success" ng-click="ReloadChart();">Reload</button>
<div class="col-lg-12 col-sm-12" id="line-chart" ng-controller="LineCtrl">
    <div class="panel panel-default">
        <div class="panel-heading">Line Chart</div>
        <div class="panel-body">
            <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
                    chart-legend="true"
                    chart-click="onClick" chart-hover="onHover" chart-series="series"
                    chart-options="{pointHitDetectionRadius: 1}"></canvas>
        </div>
    </div>
</div>

And JS:

$scope.labels = ["January", "February", "March", "April", "May"];
$scope.series = ["Temperatura"];
$scope.data = [[22, 33, 44, 55, 22]];

$scope.ReloadChart = function () {
    console.log("Reloading chart");
    $scope.labels =
        ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ["Temperatura"];
    $scope.data = [[65, 59, 80, 81, 56, 55, 40]];
}

Of course its just a part of longer code. What I would like to this part do, is to reload the Chart with new data from ReloadChart() function. But the problem is that nothing is changing. In the console I have "Reloading Chart" but the chart is still the same.

What am I doing wrong?

Answer 1

Move ng-controller="LineCtrl" so it's outside of the button element, otherwise you will have the wrong scope involved.