title: Angular - Multiple column filters for table
body: <p>I have a table where I want to have an input box below each table header to filter its corresponding column. So I have 2 questions: 1. Between thead tag, how would use the "header" variable as a value for the enclosed ng-model? 2. Between tbody tag, what would be the best approach to specify the column name in the ng-repeat for the filter (filter:{ column_name: model_name })?</p>
  
  <pre><code>&lt;table class="table table-striped table-bordered"&gt;
      &lt;thead&gt;
          &lt;th ng-repeat="header in tableHeaders"&gt;{{header}}&lt;a ng-click="sort_by(header);"&gt;&lt;/a&gt;
              &lt;div&gt;
                  &lt;input type="text" ng-model="search" ng-change="filter()" class="form-control"/&gt; &lt;!-- value for ng-model should match header variable in enclosing ng-repeat --&gt;
              &lt;/div&gt;
          &lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="data in filtered = (list | filter:{ Status: search} | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"&gt; &lt;!-- "Status" should be corresponding column header --&gt;
              &lt;td ng-repeat="header in tableHeaders"&gt;{{data[header]}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>tableheaders is an array declared in the controller:</p>
  
  <pre><code>$scope.tableHeaders = ['Environment', 'Server', 'Name', 'Status'];
  </code></pre>