var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.users = [
{ id: 1, firstname: "firstname" },
{ id: 2, firstname: "second" },
{ id: 3, firstname: "third" },
{ id: 4, firstname: "fourth" }
]
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-init="search = {}" ng-model="filterBy">
<option value="id">ID</option>
<option value="firstname">FIRST NAME</option>
</select>
<input class="form-control" placeholder="Search by {{ filterBy }}"
ng-model="search[filterBy]"
ng-disabled="!filterBy.length" />
<hr />
<table>
<tbody>
<tr ng-repeat="user in users | filter:search">
<td>{{ user.id }} - {{ user.firstname }}</td>
</tr>
</tbody>
</table>
</body>
</html>
/* Put your css in here */