Code


<div ng-app="app" ng-controller="appCtrl">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="pull-right" style="padding: 8px; padding-right: 0px;"><input class="form-control" placeholder="Global search" ng-model="globalSearchTerm" ng-change="globalSearch(globalSearchTerm)" /></div>
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html">m-grid</a>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="pull-right"><input class="form-control" placeholder="Search" ng-model="localSearchTerm" ng-change="localsearch(localSearchTerm)" /></div>
        <div class="clearfix"></div>
        <br/>
        <m-grid grid-options="gridOptions"></m-grid>
    </div>
</div>


<script>
var app = angular.module('app', ['ui.bootstrap', 'm-grid']);

app.controller('appCtrl', function ($scope, $rootScope) {
    $scope.gridOptions = {
        columns: [{
            name: '#',
            field: 'id'
        }, {
            name: 'Full name',
            field: 'fullName'
        }, {
            name: 'Email',
            field: 'email'
        }],
        sorting: true,
        defaultSorting: 'id',
        enableSearch: true
    };

    var data = [];

    for (var i = 0; i < 105; i++) {
        data.push({
            id: (i + 1),
            fullName: 'Name ' + (i + 1),
            email: 'email' + (i + 1) + '@test.com'
        })
    }

    $scope.gridOptions.data = data;

    $scope.globalSearch = function(search) {
        $rootScope.$broadcast('globalSearch', search);
    };

    $scope.localsearch = function(search) {
        $scope.gridOptions.search = search;
    }
})
</script>
      
    
We can enable search by two way