title: How to filter displayed data in ui-grid by using angularjs?
body: <p>This is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', ['ui.grid']);
  
  app.controller('TableCrtl', ['$scope', '$filter', function ($scope, $filter) {
         
          var myDummyData = [{name: "Moroni",address:"one", age: 50},
              {name: "Tiancum",address:"vij", age: 43},
              {name: "Jacob",address:"dfr", age: 27},
              {name: "Nephi",address:"mnc", age: 29},
              {name: "Enos",address:"trr", age: 34}];
         
  
          $scope.filterOptions = {
              filterText: ''
          };
          
          $scope.gridOpts = {
              data: myDummyData,
             // enableFiltering: true,
              columnDefs: [
                          {name: 'Name', field: 'name', enableFiltering: true},
                          {name: 'Address', field: 'address', enableFiltering: true}
                      ]
          };
          
          $scope.refreshData = function() {
              $scope.gridOpts.data = $filter('filter')(myDummyData, $scope.searchText, undefined);
          };
          
         
      }]);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Styles go here */
  
  .cart-item.ng-enter {
    -webkit-transition:0.5s linear all;
    transition:0.5s linear all;
    background-color: yellow;
  }
  .cart-item.ng-enter-active {
    background-color: white;
  }
  
  .myGrid {
      width: 1200px;
      height: 800px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html ng-app="app"&gt;
      &lt;head&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"&gt;&lt;/script&gt;
          
          &lt;script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"&gt;&lt;/script&gt;
          &lt;script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"&gt;&lt;/script&gt;
          &lt;script src="http://ui-grid.info/release/ui-grid-unstable.js"&gt;&lt;/script&gt;
          
        
          
          &lt;link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /&gt;
          &lt;link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /&gt;
      
          &lt;link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css"&gt;
          &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
          
          &lt;link href="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.css" rel="stylesheet" type="text/css"/&gt;
          &lt;script src="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.js" type="text/javascript"&gt;&lt;/script&gt;
        
      &lt;/head&gt;
      &lt;body ng-controller="TableCrtl"&gt;
  
          
          
          &lt;div&gt;
             
              &lt;br&gt;
              &lt;br&gt;
              &lt;input type="text" class="form-control" ng-change="refreshData()" placeholder="Produkt Name" ng-model="searchText"&gt;
              &lt;br&gt;
              &lt;div range-slider min="0" max="100" model-min="15" model-max="35"&gt;&lt;/div&gt;
              &lt;br&gt;
              &lt;div id="grid1" ui-grid="gridOpts" class="grid"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script src="script.js"&gt;&lt;/script&gt;
          
          
          
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my plunker :- <a href="http://plnkr.co/edit/qmVtzQLiZVZKyQCQSApT?p=preview" rel="nofollow">http://plnkr.co/edit/qmVtzQLiZVZKyQCQSApT?p=preview</a>
  In the above code i have 3 columns data , but i want to display two columns in ui-grid. when i search text entire data filterd,but i want to filter display data like (name and address only) in ui-grid.i tried the following code</p>
  
  <pre><code> $scope.refreshData = function() {
          $scope.gridOpts.data = $filter('filter')(myDummyData.name, $scope.searchText, undefined);
      };
  </code></pre>