Seeking something similar to this example in the documentation, but with a unique input that can serve as a filter for "any", "name", or "phone" properties. The role switching is triggered by clicking an anchor tag. Check out the code snippet here: http://jsfiddle.net/ubugnu/QuyCU/. How can I update the ng-model attribute dynamically?
HTML
<div ng-app>
<div ng-controller="MainCtrl">
<label>Any</label> <input type="text" ng-model="search.$"> <br>
<label>Name only</label> <input type="text" ng-model="search.name"><br>
<label>Phone only</label> <input type="text" ng-model="search.phone"><br>
<div style="background-color:#FAE8F1">
<hr>
<label>Filter</label> <input type="text" ng-model="search.$"> by {{filter}} <br>
<ul>
<li><a href="" ng-click="changeFilterTo('$')">Any</a></li>
<li><a href="" ng-click="changeFilterTo('name')">By Name</a></li>
<li><a href="" ng-click="changeFilterTo('phone')">By phone</a></li>
</ul>
<hr>
</div>
<table class="table">
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friend in friends | filter:search">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
</div>
</div>
JS
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.changeFilterTo = function(pr) {
$scope.filter = pr;
}
};