Populate Angular Chart from watcher - Weird behaviour

Question

I have the problem that my angular-chart is not displaying data when updated from the factory broadcast. I am setting labels and data like such, based on user input this might change:

// Listener function in controller, receives data from factory
$scope.$on("New Data", function(event, data, ID) {
        processTripData(data, ID).then(function(result) {
            setTypeDistributionBar(result).then(function(r) {
                buildTypeDistributionBar(r.data, r.labels);
            })
        })
    })
var buildTypeDistributionBar = function(data, labels) {
        $scope.distributionLabels = labels;
        $scope.distributionData = [data];
    }

The problem is that this only updates the chart after the second call of buildTypeDistributionBar. So this chart is always 1 query behind what the user puts in.

Question: Why is the chart only showing after this has been called a second time? How can I achieve that it updates immediately?

Update: I created a fiddle to demonstrate this, it doesn't show the same behaviour like I have, but similar.

score 1 · Accepted Answer · answered Jun 13 '17 at 13:09

I discovered that this just might be a scope related issue, and the answer to this question lead me to the following, which works. Basically the $scope.$apply(); forces a digest. Now the chart isn't one step behind anymore:

var buildTypeDistributionBar = function(data, labels) {
        $scope.distributionLabels = labels;
        $scope.distributionData = [data];
        $scope.$apply();
}

Populate Angular Chart from watcher - Weird behaviour

1 Answers1