How to dynamically assign filters in AngularJS

Question

I want to filter players with their roles below: html:

 <li role="presentation" ng-repeat="x in availablePlayers | unique:'PlayerRole'" >
    <a href="#pg" aria-controls="pg" role="tab" data-toggle="tab" ng-model="player.PlayerRole">{{x.PlayerRole}}</a>
</li>

and here is the list of players

 <tr ng-repeat="x in availablePlayers | filter:player">
            <td data-title="POS">{{x.PlayerRole}}</td>
            <td data-title="Player"><a href="#" class="exclamation">{{x.PlayerName}}</a></td>
            <td data-title="OPP">BOS <span class="white-color">vs</span> Cle</td>
            <td data-title="played">6</td>
            <td data-title="FPPG">42.3</td>
            <td data-title="SALARY"><span class="red-color">${{x.Price}}</span></td>
            <td data-title=""><a href="#"><img src="<?php echo $GLOBALS['RootURL'] ?>images/plus.png" alt="plus"/></a></td>
        </tr>

Answer 1

You can call $scope functionin the filter property. Here is the plunker I made.

<div ng-app>
  <div ng-controller="MainCtrl">

      <hr>
          <a ng-click="setFilter('John');">Set filter "John"</a>
      <hr>

      <table class="table">
        <tr><th>Name</th><th>Phone</th></tr>
        <tr ng-repeat="friend in friends | filter:getFilter()">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
        </tr>
      </table>
  </div>
</div>

And your features:

function MainCtrl($scope, $http) {
    $scope.friends = [{name:'John', phone:'555-1276'},
                      {name:'Mary', phone:'800-BIG-MARY'},
                      {name:'Mike', phone:'555-4321'},
                      {name:'Adam', phone:'555-5678'},
                      {name:'Julie', phone:'555-8765'}];

    $scope.filter = "";

    $scope.getFilter = function () {
        return $scope.filter;
    };  

    $scope.setFilter = function (filter) {
        $scope.filter = filter;
    };
};