ng-grid filtration affected when clicking on the grid

Question

I have developed a code for showing data in tabular format using ng-grid. Here, it is required to apply custom filter. There are two columns i.e., ID and Title in grid. Also there is one suggestion input box which contains the Title. When any title is selected from the input box the data in the grid should be filtered based on the selected title.

Below is the code for implementing the functionality.

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<div style="position: relative; height: 80px;">
    <input type="text" name="country" id="autocomplete-ajax" style="position: absolute; z-index: 2; background: transparent;"/>
    <input type="text" name="country" id="autocomplete" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;"/>
</div>  

JS

// binding unique names to the suggestions pluggin for filter.
    $('#autocomplete-ajax').devbridgeAutocomplete({
        lookup: $scope.unique,
        minChars: 1,
        onSelect: function (suggestion) {
            console.log(suggestion);
            $scope.filterSearch('Title',suggestion.value);
        },
        showNoSuggestionNotice: true,
        noSuggestionNotice: 'Sorry, no matching results'            
    });

// configuring ng-grid options
    $scope.gridOptions = { 
        data: 'videoColl',
        showGroupPanel: false,
        jqueryUIDraggable: false,
        showFilter: false,          
        multiSelect:false,
        filterOptions: $scope.filterOptions
    };
    $scope.filterSearch = function(searchField,searchText) {
    var filterText = searchField + ':'+ searchText;
    $scope.filterOptions.filterText = filterText;       
  };

When I select any title from the autocomplete-ajax it filters data but changes are not showing in the grid the moment when i select any title, instead, the data is changed in the grid when I click on the grid after selecting any title.

What am I missing to work it perfectly?

Answer 1

You are missing $scope.$apply() call after you change your filter data.

jQuery is outside of the scope of angular so you need to invoke digest cycle manually to apply data changes to your html.