Fill Angular Chart with Observer - Strange Behavior

Question

I have a problem with my angular-chart not displaying data when updating from factory. I set labels and data like this, based on user input this may 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 schedule after the second call buildTypeDistributionBar. Thus, this diagram is always 1 query for what the user places.

Question: Why is the chart displayed only after it was called a second time? How can I get an immediate update?

Update: I created a fiddle to demonstrate this, it does not show the same behavior as mine, but it seems.

Answer 1

, , scope, , . $scope.$apply(); . :

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