<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController">
<div class="container">
<div class="row">
<div class="col-md-12">
Search <input type="text" ng-model="searchEmployee" />
</div>
</div>
<table class="table table-striped ">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Phone Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees | filter:searchEmployee | orderBy:'-age'">
<td>{{emp.name}}</td>
<td>{{emp.age}}</td>
<td>{{emp.phoneNumber}}</td>
<td><button class="btn btn-primary btn-xs">Edit</button> <button class="btn btn-danger btn-xs">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var app = angular.module('sampleApplication', []);
app.controller('sampleController', function ($scope) {
$scope.employees = [{ name: "Stewart", age: "25", phoneNumber: "563544466" },
{ name: "Stone", age: "34", phoneNumber: "657865856" },
{ name: "Grudin", age: "27", phoneNumber: "679423435" },
{ name: "Drucker", age: "25", phoneNumber: "343667789" },
{ name: "Davis", age: "44", phoneNumber: "456724423" },
{ name: "Crowfoot", age: "35", phoneNumber: "789345564" },
{ name: "Confucius", age: "26", phoneNumber: "243567333" },
{ name: "Burnett", age: "50", phoneNumber: "879344666" }];
});
</script>
</body>
</html>
