<!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;
}