$scope variable do not respond to the onClick function of angular chart

Question

I have a chart in the page. When one click in the chart, the onClick function will be called and it will know which category of the chart has been clicked by user. I created a div to show $scope.cateClicked. However, the display value of $scope.cateClicked do not change in the div, while in console, I can see this value has been changed by the function indeed.

See my example here: http://codepen.io/lyzy0906/pen/ggWqpJ

The div and the canvas:

<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>

The onClick function:

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

How can I make the DIV to display the value of $scope.cateClicked after one has clicked in the chart? Thanks.

Answer 1

You'll need a $scope.$apply(); as the last thing in the onClick function:

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

It looks like the bindings are not updated by the chart-click in the same way they would in ng-click.