javascript - Angular - Multiple column filters for table -

i have table want have input box below each table header filter corresponding column. have 2 questions: 1. between thead tag, how use "header" variable value enclosed ng-model? 2. between tbody tag, best approach specify column name in ng-repeat filter (filter:{ column_name: model_name })?

<table class="table table-striped table-bordered">     <thead>         <th ng-repeat="header in tableheaders">{{header}}<a ng-click="sort_by(header);"></a>             <div>                 <input type="text" ng-model="search" ng-change="filter()" class="form-control"/> <!-- value ng-model should match header variable in enclosing ng-repeat -->             </div>         </th>     </thead>     <tbody>         <tr ng-repeat="data in filtered = (list | filter:{ status: search} | orderby : predicate :reverse) | startfrom:(currentpage-1)*entrylimit | limitto:entrylimit"> <!-- "status" should corresponding column header -->             <td ng-repeat="header in tableheaders">{{data[header]}}</td>         </tr>     </tbody> </table> 

tableheaders array declared in controller:

$scope.tableheaders = ['environment', 'server', 'name', 'status']; 

assuming tableheader values match variable names they're associated with, make search object having ng-model="search[header]" , filter filter: search. keep in mind these "ands" not "ors", matches on properties of search object, may affect how want use search object. maybe reset null in header ng-click.

<table class="table table-striped table-bordered">     <thead>         <th ng-repeat="header in tableheaders">{{header}}<a ng-click="sort_by(header);"></a>             <div>                 <input type="text" ng-model="search[header]" ng-change="filter()" class="form-control"/> <!-- value ng-model should match header variable in enclosing ng-repeat -->             </div>         </th>     </thead>     <tbody>         <tr ng-repeat="data in filtered = (list | filter: search | orderby : predicate :reverse) | startfrom:(currentpage-1)*entrylimit | limitto:entrylimit"> <!-- "status" should corresponding column header -->             <td ng-repeat="header in tableheaders">{{data[header]}}</td>         </tr>     </tbody> </table>