angularjs - UI-Grid filter data from datasource before displaying -

i have issue while displaying data in ui-grid

the scenario:

i have simple angularjs ui-grid. data source bind simple list. can add new entries list code, gets displayed on grid without code.

the issue:

if directly bind list ui-grid datasource, grid displays data correctly. however, if filter array list while assigning ui-grid datasource, , if try adding new records list, grid not refreshed automatically.

eg.

var myarr = [{"id": 1, "name": "abc"},{"id": 2, "name": "lmn"},{"id": 3, "name": "pqr"} ];  $scope.mygrd.data = myarr;  //this works...  var newobjecttopush = .... // assume object correctly initialized here   myarr.push(newobjecttopush); //adding new object array list, refresh grid automatically , new records appears immediately.  $scope.mygrd.data = myarr.filter(x=>x.id == 1); //this doesn't work 

as can see in last line of code, if try filter source list , try display records ids 1, grid appear blank, though filtered list has records. adding new records list, doesn't refresh grid.

i know, incorrect filtering array while assigning grid source , how can make work.

thanks in advance!