KendoGrid with Angular ng-repeat - angularjs

Question

I have kendo-grids in Angular ng-Repeat and serach options on the grids data.
I want to refresh the grids on search.
This is my code and it doesn't refresh the grids ($("#kendoGrid1").data("kendoGrid") is undefined), what Is the fix for this?
html
<article ng-repeat="(key,val) in gridsResult" >
<h2 class="tableTitle">{{key}}</h2>
<div kendo-grid="kendoGrid{{$index}}" k-options="getGridSlice('{{key}}')"></div>
</article>
js
$scope.getGridSlice = function (index) {
var data = $scope.gridsResult[index];
return {
dataSource: {
data: data
}
},
columns: [
{ field: "aa", title: " ", attributes: { "class": "k-header",style:"text-align:center;" }, width:"33px" },
{ field: "bb", title: "IF", template: rowTemplate.replace(/XX/g, 'IF')}
],
scrollable: false,
noRecords: true,
}};
scope.onSearch function -
$("#kendoGrid1").data("kendoGrid").datasource.read();

Answer 1

I found the answer!
The $digest dosen't work on functions so I added k-data-source based on a scope parameter not scope function.
(you need to pull the data from the DB grouped by the grids category)
<article class="tradescreenTable" ng-repeat="(key,val) in gridsResult" ng-class="{'bestAverage': bestAverageSelected}">
<h2 class="tableTitle">{{key}}</h2>
<div kendo-grid k-data-source="{{val}}" k-options="gridOptions"></div>
</article>
And k-options
$scope.gridOptions = {
columns: [
{ field: "aa", title: " ", attributes: { "class": "k-header",style:"text-align:center;" }, width:"33px" },
{ field: "bb", title: "IF", template: rowTemplate.replace(/XX/g, 'IF')}
],
scrollable: false,
noRecords: true,
};

Answer 2

You also need to refresh the grid:
$("#kendoGrid1").data("kendoGrid").datasource.read();
$("#kendoGrid1").data("kendoGrid").refresh();

Answer 3

kendo-grid="kendoGrid{{$index}}" binds the grid to the $scope - you don't need to use jQuery for this (and besides, you're not setting an id on the DOM element, so $("#kendoGrid1") is never going to work with your code as it is now).
$scope.kendoGrid1.datasource.read();
The one caveat to this is that I haven't ever tried dynamically setting the name for a Kendo Grid, so I'm not 100% that it works.