How to bind two ng-models values together - angularjs

Question

I have a JSON file displayed as a table, I want to search inside this table using two steps:
Selecting an option from a select menu to choose in which column you want to search.
an input, for typing the keyword you want to search for.
So how can I concatenate the value of the "selected option form select tag" with the value of the "input"?
For example, the User selected the option "Names" from the select menu then he entered "John" inside the input
Here is my code:
https://jsfiddle.net/p1nkfpez/7/
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.selection = "nm";
$http.get("https://api.myjson.com/bins/i9h1v")
.then(function(response) {
$scope.myRows = response.data;
$scope.rowsStatus = response.status;
$scope.rowsStatusText = response.statusText;
});
});
I want the Angular filter to be like:
filter:keyword.selection

Answer 1

You can create a function to create the filter object dynamicly:
$scope.getFilter = function() {
return {
[$scope.selection]: $scope.keyword
}
}
And use it like this:
<tr data-ng-repeat="row in myRows | filter:getFilter()">
...
</tr>

Answer 2

You can create a custom filter in which you can access your properties by name.
Custom filter
$scope.myCustomFilter = function(row){
if($scope.keyword == undefined || $scope.keyword.length == 0)
return true;
if(row[$scope.selection].toLowerCase().indexOf($scope.keyword) >= 0){
return true;
}
else
return false;
}
And add filter to your ng-repeat
<tbody>
<tr data-ng-repeat="row in myRows | filter: myCustomFilter">
<td>{{$index + 1}}</td>
<td>{{row.nm}}</td>
<td>{{row.cty}}</td>
<td>{{row.hse}}</td>
<td>{{row.yrs}}</td>
</tr>
</tbody>
Updated Fiddle