Two way data binding in C3.js in AngularJS

Question

I'm trying to filter data in table with click on the bar chart (when I click on the bar, in the table appears corresponding record)

In the controller there is onlick method for getting the name from the object.

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

There is also a table directive with isolated scope and it's expecting a country to be passed

.directive("countryItem", function() {
    return {
      restrict: "E",
      templateUrl: "table.html",
      //isolated scope and 2-way bind country
      scope: {
        country: "="
      },
      link: function(scope, element, attrs) {
        scope.countries = [{"country":"Argentina","fifarank":7},{"country":"Belgium","fifarank":12}, {"country":"Croatia","fifarank":14}];
      }
    };
  });

so it's binded in directives isolate scope.

<tr ng-repeat="foot in countries | orderBy:orderByField:reverse | filter:search" country="country">

What I'm doing wrong? Here is the plunker, but onclick method works only on Firefox and older version of Chrome and Opera.

Answer 1

Couple of issues here:

1) In your Plunker, you were not passing in a value for country to the directive - should be like this:

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

2) Syntax error on filter - should be like this:

<tr ng-repeat="foot in countries | orderBy:orderByField:reverse | filter:country">

3) When you call Angular code from a D3 or other non-Angular event handler, you need to wrap it in a $timeout in order to trigger an Angular $digest cycle.

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

Updated Plunker