Check this example. Now please take its reference and correct your code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="MyApp">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope, $http) {
$scope.name = "na";
$scope.city = "se";
$scope.Employees = [{ Id: 1, Name: "Nancy Davolio", City: "Seattle", Country: "USA" },
{ Id: 2, Name: "Andrew Fuller", City: "Tacoma", Country: "USA" },
{ Id: 3, Name: "Janet Leverling", City: "Kirkland", Country: "USA" },
{ Id: 4, Name: "Margaret Peacock", City: "Redmond", Country: "USA" },
{ Id: 5, Name: "Steven Buchanan", City: "London", Country: "UK" },
{ Id: 6, Name: "Michael Suyama", City: "London", Country: "UK" },
{ Id: 7, Name: "Robert King", City: "London", Country: "UK" },
{ Id: 8, Name: "Laura Callahan", City: "Seattle", Country: "USA" },
{ Id: 9, Name: "Anne Dodsworth", City: "London", Country: "UK"}];
$scope.search = function (employee) {
if ((!$scope.name || !$scope.city) ||
((employee.Name.toLowerCase().indexOf(($scope.name || '').toLowerCase()) != -1)
|| (employee.City.toLowerCase().indexOf(($scope.city || '').toLowerCase()) != -1))) {
return true;
}
return false;
};
});
app.controller('MyController1', function ($scope, $http) {
$scope.Employees = [{ Id: 1, Name: "Nancy Davolio", City: "Seattle", Country: "USA" },
{ Id: 2, Name: "Andrew Fuller", City: "Tacoma", Country: "USA" },
{ Id: 3, Name: "Janet Leverling", City: "Kirkland", Country: "USA" },
{ Id: 4, Name: "Margaret Peacock", City: "Redmond", Country: "USA" },
{ Id: 5, Name: "Steven Buchanan", City: "London", Country: "UK" },
{ Id: 6, Name: "Michael Suyama", City: "London", Country: "UK" },
{ Id: 7, Name: "Robert King", City: "London", Country: "UK" },
{ Id: 8, Name: "Laura Callahan", City: "Seattle", Country: "USA" },
{ Id: 9, Name: "Anne Dodsworth", City: "London", Country: "UK"}];
});
</script>
<div ng-controller="MyController" class="container">
<div class="row">
<input type="text" ng-model="name" class="form-control" placeholder="Enter Name" />
<input type="text" ng-model="city" class="form-control" placeholder="Enter City" />
</div>
<div class="row">
</div>
<div class="row">
<table class="table table-striped table-bordered table-hover">
<tr>
<th>Id</th>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
<tr ng-repeat="employee in Employees | filter: search">
<td>{{employee.Id}}</td>
<td>{{employee.Name}}</td>
<td>{{employee.City}}</td>
<td>{{employee.Country}}</td>
</tr>
</table>
</div>
</div>
<hr/>
<div ng-controller="MyController1" class="container">
<div class="row">
<input type="text" ng-model="search.name" class="form-control" placeholder="Enter Name" />
<input type="text" ng-model="search.city" class="form-control" placeholder="Enter City" />
</div>
<div class="row">
</div>
<div class="row">
<table class="table table-striped table-bordered table-hover">
<tr>
<th>Id</th>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
<tr ng-repeat="employee in Employees | filter: {Name: search.name, City: search.city}">
<td>{{employee.Id}}</td>
<td>{{employee.Name}}</td>
<td>{{employee.City}}</td>
<td>{{employee.Country}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
