<!DOCTYPE html>
<html ng-app="appModule" class="ng-scope">
<head>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<script data-require="angular.js@*" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="input-group">
<div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
<input type="text" class="form-control" id="search" placeholder="Seach User" ng-model="searchUser" />
</div>
<table class="table" ng-controller="userController">
<thead>
<tr>
<th>
<a href="#" ng-click="sortType = 'fname'; sortReverse = !sortReverse">First Name
<span ng-show="sortType == 'fname' && !sortReverse" class="dropdown">
<span class="caret"></span>
</span>
<span ng-show="sortType == 'fname' && sortReverse" class="dropup">
<span class="caret"></span>
</span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'lname'; sortReverse = !sortReverse">Last Name
<span ng-show="sortType == 'lname' && !sortReverse" class="dropdown">
<span class="caret"></span>
</span>
<span ng-show="sortType == 'lname' && sortReverse" class="dropup">
<span class="caret"></span>
</span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'uname'; sortReverse = !sortReverse">Username
<span ng-show="sortType == 'uname' && !sortReverse" class="dropdown">
<span class="caret"></span>
</span>
<span ng-show="sortType == 'uname' && sortReverse" class="dropup">
<span class="caret"></span>
</span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'email'; sortReverse = !sortReverse">Email
<span ng-show="sortType == 'email' && !sortReverse" class="dropdown">
<span class="caret"></span>
</span>
<span ng-show="sortType == 'email' && sortReverse" class="dropup">
<span class="caret"></span>
</span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in userList | orderBy:sortType:sortReverse | filter:searchUser" ng-class-odd="'tr-odd'" ng-class-even="'tr-even'">
<td>{{ user.fname }}</td>
<td>{{ user.lname }}</td>
<td>{{ user.uname }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</body>
</html>
$(document).ready(function(){
var app = angular.module("appModule",[]);
app.controller('userController', function($scope){
// let us say that list is the result of your ajax for list of users
$scope.userList = [
{fname:'Robert', lname:'Nicjoo', uname:'rnicjoo', email:'rnicjoo@stackoverflow.com'},
{fname:'Liam', lname:'Ezreal', uname:'lezreal', email:'lezreal@stackoverflow.com'},
];
$scope.sortType = 'lname'; // set the default sort type
$scope.sortReverse = true; // set the default sort order
});
});
/* Styles go here */
.tr-odd {
background-color: #ddd;
}