angular grid hide when filter the records

Question

I am using angulargrid and I have products array $scope.products and fetch records from database everything is perfect and grid is showing.

When I apply filter like I query records from database and reassign the records to $scope.products but grid vanish. So I apply angularGridInstance.gallery.refresh() but it not works.

After that I add timeout of 2 seconds and then refresh the grid using angularGridInstance.gallery.refresh() in that case grid start showing.

I don't want to add 2 seconds delay everytime when I filter records. Please suggest any better solution.

This is the dropdown from where I am calling filter query

<select ng-model="selectedMerchants" id="test" class="ui fluid dropdown" ng-change="filterUpdate(selectedMerchants)">
    <option ng-repeat="s in suppliers" value="{{s.id}}">{{s.name}}</option>
</select>

This is the grid layout

<ul class="dynamic-grid" angular-grid="pics" ag-grid-width="300" ag-gutter-size="10" ag-id="handleBarGrid">
   <li class="grid md-whiteframe-2dp" id="product{{p.id}}" ng-repeat="p in products">
     // some data
    </li>
</ul>

This is controller logic

$scope.filterUpdate = function(){
  var promise = asyncFilterResult(filterUpdateQuery); // filter query which fetch the records from database
  promise.then(function(productsData) {
    $scope.products = productsData;
    angularGridInstance.handleBarGrid.refresh();
    console.log("Success");
  }, function(reason) {
    angularGridInstance.handleBarGrid.refresh();
  });

}

Thanks.