Custom UI-Grid Filter

<!doctype html>
<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.3/ui-grid.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.3/ui-grid.min.css" type="text/css">
    
    <link rel='stylesheet' href='style.css'>
  </head>
  <body>

<div ng-controller="MainCtrl">
  <h3>Custom Filter Example</h3>
 <div>Custom Name Filter: <input type="text" ng-model="nameFilter">
      <button ng-click="filterName()">Filter By Name</button></div>
      
<div>Custom Company Filter: <input type="text" ng-model="companyFilter">
      <button ng-click="filterCompany()">Filter By Company</button>
      <button ng-click="filterReset()">Reset</button>
      </div>
      
  <br>
  <div id="grid1" ui-grid="gridOptions" 
     ui-grid-pagination
     ui-grid-grouping
     ui-grid-selection
     ui-grid-save-state ></div>
      
</div>
    <script src="script.js"></script>
  </body>
</html>

// Code goes here
//http://ui-grid.info/docs/#/tutorial/098_contributing_to_ui-grid
//https://github.com/angular-ui/ui-grid/wiki/Defining-Columns
//http://ui-grid.info/
var app = angular.module('app', ['ui.grid', 'ui.grid.saveState', 'ui.grid.pagination', 'ui.grid.grouping', 'ui.grid.selection']);


app.factory('dataService', function($http){
    return {
        getData: function() {
            return $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json');
        }
    };
});

app.controller('MainCtrl', ['$scope', '$http', 'dataService', function ($scope, $http, dataService) {
  
  getGridData();
  //$scope.originalData =   getGridData();
  function getGridData(){
    dataService.getData().success(function(data){
      $scope.gridOptions.data = data;    
    });
  }
  
  $scope.gridOptions = {
    enableFiltering: true,
    paginationPageSizes: [5, 10, 15],
    paginationPageSize: 15,
    enableSorting: true,
     enableRowSelection: true,
    isRowSelectable : function(row) {
    if (row.entity.gender == 'male') {
      console.log('selected');
      return false;
    } else {
      console.log('not selected');
      return true;
    }
  },
    columnDefs: [
      
      { field: 'name', enableFiltering: false },
      { field: 'gender', enableFiltering: false, enableSorting: false, grouping:{groupPriority: 1}, sort: { priority: 1, direction: 'asc' },   },
      { field: 'company', enableFiltering: false, enableSorting: false, },
      { field: 'email', enableFiltering: false, enableSorting: false },
      { field: 'phone', enableFiltering: false, enableSorting: false },
      { field: 'age', enableFiltering: false, enableSorting: false }
    ],
        onRegisterApi: function(gridApi){ 
            $scope.gridApi = gridApi;
    }
  };
  
  $scope.state = {};
  $scope.saveState = function() {
    $scope.state = $scope.gridApi.saveState.save();
  };
  $scope.filterName = function(){
    $scope.state = $scope.gridApi.saveState.save();
    $scope.state.columns[0].filters[0] = {term: $scope.nameFilter || '*'};
    $scope.gridApi.saveState.restore( $scope, $scope.state );
   
  };
  $scope.filterCompany = function(){
    $scope.state = $scope.gridApi.saveState.save();
    $scope.state.columns[2].filters[0] = {term: $scope.companyFilter || '*'};
    $scope.gridApi.saveState.restore( $scope, $scope.state );
  };
  
  $scope.filterReset = function(){
    //$scope.gridOptions.data = $scope.originalData;
    $scope.gridApi.grid.clearAllFilters();
  };
  
}]);

/* Styles go here */

.grid {
  width: 650px;
  height: 400px;
}