title: ng-table Filter via select drop down menu
body: <p>I am trying to create a Ng-table along with a select drop down menu for filtering the result. This is what i have gotten so far. </p>
  
  <p>1) How do i get rid of the pagination created as a result of the filter menu? I only need one pagination. I understand that i can do it via CSS .ng-table-pager {
      display: none;
  }. However, both pagination will be gone.</p>
  
  <p>2) The default filter menu is blank which shows ALL data. This is great. How do i change the blank field to "ALL" text field?</p>
  
  <p>3) Instead of straight away filtering, can i add a submit button before invoking the filter function?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
      "use strict";
  
      angular.module("uCloud", ["ngTable"])
          .controller("myController", myController);
  
      myController.$inject = ["NgTableParams"];
  
      function myController(NgTableParams) {
  
          this.nameFilter = [
              {id:"teste1", title:"-&gt; teste1"},
              {id:"teste2", title:"-&gt; teste 2"},
              {id:"teste3", title:"-&gt; teste 3"},
              {id:"teste4", title:"-&gt; teste 4"},
              {id:"teste5", title:"-&gt; teste 5"},
          ];
  
  
  
          this.objectTest = [
  
              {name: "teste1", description: "testando1"},
              {name: "teste2", description: "testando2"},
              {name: "teste3", description: "testando3"},
              {name: "teste4", description: "testando4"}
          ];
  
          this.tableParams = new NgTableParams({}, {
              dataset: this.objectTest
          });
      }
  })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html &gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;ng-table - Select Filter&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div ng-app="uCloud" class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-3" ng-controller="myController as demo"&gt;
              &lt;h3&gt;ngTable&lt;/h3&gt;
              &lt;table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped"&gt;
                  &lt;tr ng-repeat="row in $data"&gt;
  
                      &lt;td data-title="'Name'"
                          filter-data="demo.nameFilter"&gt;{{row.name}}
                      &lt;/td&gt;
  
  
  
                      &lt;td data-title="'Description'"
                          filter-data="demo.descriptionFilter"&gt;{{row.description}}
                      &lt;/td&gt;
  
  
                  &lt;/tr&gt;
              &lt;/table&gt;
  
              &lt;table ng-table="demo.tableParams" class=""&gt;
  
              &lt;td data-title="'Name'"
                  filter="{name: 'select'}"
                  filter-data="demo.nameFilter"&gt;All{{row.name}}
              &lt;/td&gt;            &lt;/table&gt;
  
  
  
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js'&gt;&lt;/script&gt;
  
  &lt;script src='https://unpkg.com/ng-table/bundles/ng-table.min.js'&gt;&lt;/script&gt;
  &lt;script src="index.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>