$ переменная scope не реагирует на функцию onClick угловой диаграммы

Question

У меня есть диаграмма на странице. Когда один клик на диаграмме, будет вызываться функция onClick, и он будет знать, какая категория диаграммы была нажата пользователем. Я создал div, чтобы показать $scope.cateClicked. Однако отображаемое значение $scope.cateClicked не изменяется в div, тогда как в консоли я вижу, что это значение было действительно изменено функцией.

Смотрите мой пример здесь: http://codepen.io/lyzy0906/pen/ggWqpJ

В DIV и холст:

<div>You clicked {{cateClicked}}</div> 
<canvas class="chart chart-pie" chart-click="onClick" chart-data="data" chart-labels="labels" chart-colors="color" chart-options="option"></canvas> 

Функция OnClick:

$scope.onClick = function(elements, evt) { 
    $scope.cateClicked = elements[0]._model.label; 
    $scope.tabIndex = 1; 
    console.log($scope.cateClicked); 
}; 

Как я могу сделать DIV, чтобы отобразить значение $ scope.cateClicked после щелчка по диаграмме? Благодарю.

Answer 1

Вам потребуется $scope.$apply(); в последнюю очередь в функции onClick:

$scope.onClick = function(elements, evt) { 
    $scope.cateClicked = elements[0]._model.label; 
    console.log($scope.cateClicked); 
    $scope.$apply(); 
}; 

Похоже, переплеты не обновляются диаграммы щелкните таким же образом, что они в нг щелчку.

Answer 2

Добавить $ timeout в цикл дайджеста. Это работает!

angular 
     .module('StarterApp', ['ngMaterial', 'chart.js']) 
     .controller('AppCtrl', function ($scope, $timeout) { 
     $scope.cateClicked = "?"; 
     $scope.color = ["#378A58", "#3FBF4E", "#83DF1F", "#AAD466"]; 
     $scope.labels = ["A", "B", "C", "D"]; 
     $scope.data = [1, 2, 3, 4]; 
     $scope.option = {legend: {position: 'right', display: true}}; 
     $scope.onClick = function(elements, evt) { 

      $timeout(function(){ 
      $scope.cateClicked = elements[0]._model.label; 
      $scope.tabIndex = 0; 
      }, 0) 

     }; 

    });