Getting data for two way data binding

Question

Why I don't have access to data from method defined in onclick method?

onclick: function(d, i) {
  $scope.country = d.name;
  console.log($scope.country);
}

I want to get the name from the object and show in HTML <h1>Clicked: {{country}}</h1> Plunker

Answer 1

country-item directive has an isolated scope defined inside it. So, you need to pass it the country in the html:

<country-item country="country"></country-item>

If you need to add the same behavior when clicking on the Chart bars, you must add $scope.$apply() in the onClick callback:

onclick: function(d, i) {
    $scope.country = d.name;
    $scope.$apply();
}

The digest cycle has finished and you need to inform Angular that something has changed.