Remplir le graphique angulaire de watcher - comportement étrange

Question

J'ai le problème que mon graphique angulaire n'affiche pas les données lorsqu'il est mis à jour à partir de la diffusion d'usine. comme par exemple, je suis en train d'étiquettes et des données basées sur l'entrée d'utilisateur cela pourrait changer:

// 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]; 
    } 

Le problème est que cela ne met à jour le tableau après le deuxième appel de buildTypeDistributionBar. Donc, ce graphique est toujours une requête derrière ce que l'utilisateur met en.

Question: Pourquoi le tableau n'apparaît-il qu'après avoir été appelé une seconde fois? Comment puis-je réaliser qu'il se met à jour immédiatement?

Mise à jour: J'ai créé un fiddle pour le démontrer, il n'affiche pas le même comportement que j'ai, mais similaire.

Answer 1

J'ai découvert que cela pourrait être un problème connexe scope, et la réponse à this question m'a conduit à ce qui suit, qui fonctionne. Fondamentalement, le $scope.$apply(); force un condensé. Maintenant, le graphique n'est plus en retard:

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