How to bind two ng-models values together

Question

I have a JSON file displayed as a table, I want to search inside this table using two steps:

1. Selecting an option from a select menu to choose in which column you want to search.

2. 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>