Bind filter in angular-ui-grid

Question

I'm trying to filter ui grid based on a value from the bar chart, but I don't know how to bind this value in ui grid.

In table directive, there is isolated scope with country to be passed:

app.directive("countryItem", function() {
  return {
    restrict: "E",
    templateUrl: "table.html",
    //isolated scope and 2-way bind country
    scope: {
      country: "="
    }
  };
});

The next would be binding in ui grid.. I've tried with directly binding in grid definition (filter:country), but it doesn't work:

<div id="grid1" ui-grid="gridOptions" ui-grid-selection ui-grid-pagination ui-grid-resize-columns class="grid" external-scopes="$scope" filter:country></div>

Please take a look at the plunker with ui grid, and here is the working plunker with custom table (what I'm trying to do with ui grid)

Answer 1

Have a look at http://plnkr.co/edit/5LBpfCRgdaIIqQKJKhgs?p=preview.

You need to set the filter.term dynamically when the country changes.

  $scope.$watch('country', function () {
    $scope.gridOptions.columnDefs[0].filter.term = $scope.country;
    $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN )
  });