Simple HTML table with sorting, filtering, and pagination implemented with Angular.js

fiddle.css

.pointer-cursor {
  cursor: pointer;
}

#people-table {
  table-layout: fixed;
}

#filter {
  margin: 0;
  padding: 0;
}
#filter input {
  width: 100%;
}

#page-size {
  padding-left: 1em;
}

.pagination {
  margin: 0;
}

fiddle.html

<section ng-app="table-demo" ng-controller="tableCtrl" class="container">
  <h1>Demo: People in a table</h1>
  <hr />
  
  <div id="grid-controls" class="form-inline">
    <div class="form-group has-feedback col-md-6 col-xs-4" id="filter">
      <input class="form-control" ng-model="filterStr" />
      <span class="glyphicon glyphicon-filter form-control-feedback" aria-hidden="true"></span>
    </div>
    
    <div class="form-group col-md-3 col-xs-4" id="page-size">
      <div class="pull-right">
        <label for="pageSizeSelect">Page Size:</label>
        <select id="pageSizeSelect" class="form-control" ng-model="pagination.pageSize" ng-options="size for size in pageSizes">
          <option value="">All</option>
        </select>
      </div>
    </div>
    
    <nav class="col-md-3 col-xs-4">
      <ul class="pagination pull-right">
        <li ng-class="{disabled: pagination.pageNum === 0}"><a href="#" ng-click="pageZero()">&laquo;</a></li>
        <li ng-class="{disabled: pagination.pageNum === 0}"><a href="#" ng-click="pageLeft()">&lsaquo;</a></li>
        <li class="disabled"><a href="#">{{pagination.pageNum + 1}}</a></li>
        <li ng-class="{disabled: pagination.pageNum === lastPage()}"><a href="#" ng-click="pageRight()">&rsaquo;</a></li>
        <li ng-class="{disabled: pagination.pageNum === lastPage()}"><a href="#" ng-click="pageMax()">&raquo;</a></li>
      </ul>
    </nav>
  </div>

  <table id="people-table" class="table table-hover">
    <thead>
      <th class="pointer-cursor" ng-repeat="field in dataFields" ng-click="sortBy(field)">
        {{display(field)}}
        <!--
            chevron indicating that the table is sorted by this column
            chevron direction indicates sort direction
            the 'invisible' Bootstrap class is applied when it should be hidden
        -->
        <i class="glyphicon"
           ng-class="{
            'invisible'              : pagination.sortBy !== field,
            'glyphicon-chevron-up'   : pagination.sortAscend,
            'glyphicon-chevron-down' : !pagination.sortAscend
          }"></i>
      </th>
    </thead>
    <tbody>
      <!-- filtering, sorting, and pagination are implemented through filters on the ngRepeat expression -->
      <tr ng-repeat="person in people
            | filter : filterStr
            | orderBy : pagination.sortBy : pagination.sortAscend
            | paginate : pagination.pageNum : pagination.pageSize
          ">
        <td>{{person.id}}</td>
        <td>{{person.first_name}}</td>
        <td>{{person.last_name}}</td>
        <td>{{person.hobby}}</td>
      </tr>
    </tbody>
  </table>

</section>

fiddle.js

var app = angular.module('table-demo', []);
app.controller('tableCtrl', function($scope, peopleService) {
  // list of object properties to use as columns in the table
  $scope.dataFields = ['id', 'first_name', 'last_name', 'hobby'];
  // pagination object
  $scope.pagination = {
    pageNum: 0,
    pageSize: 10,
    sortBy: 'id',
    sortAscend: false
  };
  // available page sizes
  $scope.pageSizes = [5, 10, 25, 50, 100];
  // convert snake_case_strings to Capital Case Strings
  $scope.display = function(label){
    return label
      .split('_')   // split on underscores
      .join(' ')    // join with a space
      .replace(     // capitalize the first character of each word
        /\b(\w)/g,  // regex for the first alphanum character in a word
        function(_, letter){ return letter.toUpperCase(); }  // return the match, uppercased
      );
  };
   
  // load data array from service
  $scope.people = [];
  var pplPromise = peopleService.getPeople();
  pplPromise.then(function(people) {
  	$scope.people = people;
  });
  
  // sort by the given field; if already sorting by that field, reverse direction
  $scope.sortBy = function(field) {
    // if already sorting by field,
    if ($scope.pagination.sortBy === field)
      // toggle sortAscend
      $scope.pagination.sortAscend = !$scope.pagination.sortAscend;
    // if not currently sorting by field,
    else {
      // sort by field
      $scope.pagination.sortBy = field;
      // sort descending
      $scope.pagination.sortAscend = false;
    }
  };
  
  $scope.$watch('filterStr', function(newStr, oldStr) {
  	console.log(newStr, oldStr);
  	// when a filter is entered, jump back to the first page
    if ((!angular.isString(oldStr) || oldStr.length === 0) && (angular.isString(newStr) && newStr.length > 0)) {
    	$scope.pagination.pageNum = 0;
    }
  });
  
  // pagination functions
  $scope.pageZero = function() {
  	$scope.pagination.pageNum = 0;
  };
  $scope.pageLeft = function() {
    if ($scope.pagination.pageNum > 0) $scope.pagination.pageNum--;
  };
  $scope.pageRight = function() {
    if ($scope.pagination.pageNum*$scope.pagination.pageSize < $scope.people.length) $scope.pagination.pageNum++;
  };
  $scope.pageMax = function() {
  	$scope.pagination.pageNum = $scope.lastPage();
  };
  $scope.lastPage = function() {
  	return Math.floor(($scope.people.length-1)/$scope.pagination.pageSize);
  };
  
});

// simple pagination filter
app.filter('paginate', function() {
  return function(list, pageNum, pageSize) {
  	if (!angular.isArray(list)) return [];
    pageNum = pageNum || 0;
    pageSize = pageSize || list.length;
    var pageStart = pageNum*pageSize;
    return list.slice(pageStart, pageStart+pageSize);
  };
});

// example peopleService; could also load from a JSON file, database via REST service, RSS feed, etc.
app.factory('peopleService', function($q) {
  var people = [
    {"id": 1, "first_name": "Tana", "last_name": "Carter", "hobby": "Origami"},
    {"id": 2, "first_name": "Armando", "last_name": "Christensen", "hobby": "Dance"},
    {"id": 3, "first_name": "Acton", "last_name": "Copeland", "hobby": "Metal detecting"},
    {"id": 4, "first_name": "Barclay", "last_name": "Peterson", "hobby": "Poi"},
    {"id": 5, "first_name": "Kelly", "last_name": "Cohen", "hobby": "Pet"},
    {"id": 6, "first_name": "Hadley", "last_name": "Kent", "hobby": "Mineral collecting"},
    {"id": 7, "first_name": "Ava", "last_name": "Olsen", "hobby": "Mountain biking"},
    {"id": 8, "first_name": "Timothy", "last_name": "Kerr", "hobby": "Mushroom hunting/Mycology"},
    {"id": 9, "first_name": "Kamal", "last_name": "Hodge", "hobby": "Jogging"},
    {"id": 10, "first_name": "Imogene", "last_name": "Mendez", "hobby": "Crossword puzzles"},
    {"id": 11, "first_name": "Cassady", "last_name": "Fuller", "hobby": "Topiary"},
    {"id": 12, "first_name": "Adrienne", "last_name": "Flores", "hobby": "Vintage cars"},
    {"id": 13, "first_name": "Calvin", "last_name": "Reilly", "hobby": "Flag Football"},
    {"id": 14, "first_name": "Aretha", "last_name": "Moran", "hobby": "Coffee roasting"},
    {"id": 15, "first_name": "Uta", "last_name": "Sullivan", "hobby": "Flower arranging"},
    {"id": 16, "first_name": "Naida", "last_name": "Acosta", "hobby": "Sculling or Rowing"},
    {"id": 17, "first_name": "Kristen", "last_name": "Ochoa", "hobby": "Gaming"},
    {"id": 18, "first_name": "Paula", "last_name": "Byers", "hobby": "Baseball"},
    {"id": 19, "first_name": "Nolan", "last_name": "Byrd", "hobby": "Skateboarding"},
    {"id": 20, "first_name": "Moses", "last_name": "Strong", "hobby": "Flying"},
    {"id": 21, "first_name": "Plato", "last_name": "Franks", "hobby": "Fashion"},
    {"id": 22, "first_name": "Carl", "last_name": "Watson", "hobby": "Rugby"},
    {"id": 23, "first_name": "Shafira", "last_name": "Sandoval", "hobby": "Macrame"},
    {"id": 24, "first_name": "Adena", "last_name": "Strickland", "hobby": "Quilting"},
    {"id": 25, "first_name": "Adele", "last_name": "Albert", "hobby": "Lockpicking"},
    {"id": 26, "first_name": "Donna", "last_name": "Roberts", "hobby": "Couponing"},
    {"id": 27, "first_name": "Hoyt", "last_name": "Johnson", "hobby": "Computer programming"},
    {"id": 28, "first_name": "Lara", "last_name": "Hamilton", "hobby": "Antiquities"},
    {"id": 29, "first_name": "Troy", "last_name": "Carson", "hobby": "Hiking"},
    {"id": 30, "first_name": "Janna", "last_name": "Duran", "hobby": "Surfing"},
    {"id": 31, "first_name": "Baker", "last_name": "Hobbs", "hobby": "Whittling"},
    {"id": 32, "first_name": "Joy", "last_name": "Clarke", "hobby": "Web surfing"},
    {"id": 33, "first_name": "Stuart", "last_name": "Slater", "hobby": "Rock balancing"},
    {"id": 34, "first_name": "Elijah", "last_name": "Burt", "hobby": "Gardening"},
    {"id": 35, "first_name": "Christopher", "last_name": "Warren", "hobby": "Candle making"},
    {"id": 36, "first_name": "Rhea", "last_name": "Holloway", "hobby": "Knife making"},
    {"id": 37, "first_name": "Ralph", "last_name": "Mejia", "hobby": "Jewelry making"},
    {"id": 38, "first_name": "Ginger", "last_name": "Carter", "hobby": "Motor sports"},
    {"id": 39, "first_name": "August", "last_name": "Mercado", "hobby": "Video game collecting"},
    {"id": 40, "first_name": "Kaitlin", "last_name": "Ortega", "hobby": "Community"},
    {"id": 41, "first_name": "Cody", "last_name": "Merritt", "hobby": "Embroidery"},
    {"id": 42, "first_name": "Yuli", "last_name": "Douglas", "hobby": "Deltiology (postcard collecting)"},
    {"id": 43, "first_name": "Lee", "last_name": "Pacheco", "hobby": "Water sports"},
    {"id": 44, "first_name": "Lael", "last_name": "Coleman", "hobby": "Geocaching"},
    {"id": 45, "first_name": "Rae", "last_name": "Huber", "hobby": "Walking"},
    {"id": 46, "first_name": "Driscoll", "last_name": "Nunez", "hobby": "Archery"},
    {"id": 47, "first_name": "Tatyana", "last_name": "Patel", "hobby": "Kite flying"},
    {"id": 48, "first_name": "Brady", "last_name": "Schroeder", "hobby": "Card collecting"},
    {"id": 49, "first_name": "Nicholas", "last_name": "Martinez", "hobby": "Gunsmithing"},
    {"id": 50, "first_name": "Genevieve", "last_name": "Glass", "hobby": "Driving"},
    {"id": 51, "first_name": "Benjamin", "last_name": "Craft", "hobby": "Element collecting"},
    {"id": 52, "first_name": "Colorado", "last_name": "Powell", "hobby": "Book restoration"},
    {"id": 53, "first_name": "Kim", "last_name": "Rogers", "hobby": "Soapmaking"},
    {"id": 54, "first_name": "Marsden", "last_name": "Morris", "hobby": "Magic"},
    {"id": 55, "first_name": "Kibo", "last_name": "Russo", "hobby": "Board games"},
    {"id": 56, "first_name": "Dacey", "last_name": "Delacruz", "hobby": "Tai chi"},
    {"id": 57, "first_name": "Kelly", "last_name": "Powell", "hobby": "Fossil hunting"},
    {"id": 58, "first_name": "Leslie", "last_name": "Cook", "hobby": "Snowboarding"},
    {"id": 59, "first_name": "Cameran", "last_name": "Colon", "hobby": "Backpacking"},
    {"id": 60, "first_name": "Vaughan", "last_name": "Trujillo", "hobby": "Shooting"},
    {"id": 61, "first_name": "Colt", "last_name": "Little", "hobby": "Cooking"},
    {"id": 62, "first_name": "Rebekah", "last_name": "Haynes", "hobby": "Insect collecting"},
    {"id": 63, "first_name": "Aquila", "last_name": "Roth", "hobby": "Topiary"},
    {"id": 64, "first_name": "Martina", "last_name": "Clay", "hobby": "Nordic skating"},
    {"id": 65, "first_name": "Velma", "last_name": "Bernard", "hobby": "Amateur radio"},
    {"id": 66, "first_name": "Sydnee", "last_name": "Bond", "hobby": "Jigsaw puzzles"},
    {"id": 67, "first_name": "Veronica", "last_name": "Myers", "hobby": "Topiary"},
    {"id": 68, "first_name": "Chelsea", "last_name": "Merrill", "hobby": "Knitting"},
    {"id": 69, "first_name": "Amena", "last_name": "Solis", "hobby": "Bodybuilding"},
    {"id": 70, "first_name": "Salvador", "last_name": "Santos", "hobby": "Drawing"},
    {"id": 71, "first_name": "Keelie", "last_name": "Irwin", "hobby": "Kabaddi"},
    {"id": 72, "first_name": "Courtney", "last_name": "Holcomb", "hobby": "Sea glass collecting"},
    {"id": 73, "first_name": "Moana", "last_name": "Peterson", "hobby": "Lego building"},
    {"id": 74, "first_name": "Tucker", "last_name": "Yang", "hobby": "Flower arranging"},
    {"id": 75, "first_name": "Ahmed", "last_name": "Kane", "hobby": "Jewelry making"},
    {"id": 76, "first_name": "Chaney", "last_name": "Smith", "hobby": "Yoga"},
    {"id": 77, "first_name": "Randall", "last_name": "Mathis", "hobby": "Writing"},
    {"id": 78, "first_name": "Orlando", "last_name": "Hardin", "hobby": "Metal detecting"},
    {"id": 79, "first_name": "Belle", "last_name": "Peterson", "hobby": "Scuba diving"},
    {"id": 80, "first_name": "Wynne", "last_name": "Ellison", "hobby": "Urban exploration"},
    {"id": 81, "first_name": "Martena", "last_name": "Dillard", "hobby": "Fossil hunting"},
    {"id": 82, "first_name": "Linus", "last_name": "Copeland", "hobby": "Community"},
    {"id": 83, "first_name": "Marah", "last_name": "Roy", "hobby": "Poi"},
    {"id": 84, "first_name": "Zephania", "last_name": "Rhodes", "hobby": "Brazilian jiu-jitsu"},
    {"id": 85, "first_name": "Lester", "last_name": "Green", "hobby": "Polo"},
    {"id": 86, "first_name": "Serina", "last_name": "Duke", "hobby": "Baton twirling"},
    {"id": 87, "first_name": "Prescott", "last_name": "Pena", "hobby": "Antiquities"},
    {"id": 88, "first_name": "Nita", "last_name": "Mcintosh", "hobby": "Cycling"},
    {"id": 89, "first_name": "Shad", "last_name": "Walls", "hobby": "Cycling"},
    {"id": 90, "first_name": "Lois", "last_name": "Vinson", "hobby": "Bird watching"},
    {"id": 91, "first_name": "Hollee", "last_name": "Noel", "hobby": "Juggling"},
    {"id": 92, "first_name": "Imani", "last_name": "Lang", "hobby": "Embroidery"},
    {"id": 93, "first_name": "Hope", "last_name": "Webster", "hobby": "Hooping"},
    {"id": 94, "first_name": "Kaye", "last_name": "Cochran", "hobby": "Record collecting"},
    {"id": 95, "first_name": "Kelly", "last_name": "Holden", "hobby": "Kitesurfing"},
    {"id": 96, "first_name": "Addison", "last_name": "Fleming", "hobby": "Graffiti"},
    {"id": 97, "first_name": "Oliver", "last_name": "Walton", "hobby": "Walking"},
    {"id": 98, "first_name": "Adrienne", "last_name": "Dorsey", "hobby": "Board games"},
    {"id": 99, "first_name": "Priscilla", "last_name": "Whitaker", "hobby": "Backpacking"},
    {"id": 100, "first_name": "Garrison", "last_name": "Heath", "hobby": "Skimboarding"},
    {"id": 101, "first_name": "Magee", "last_name": "Porter", "hobby": "Metal detecting"},
    {"id": 102, "first_name": "Brianna", "last_name": "Bruce", "hobby": "Cryptography"},
    {"id": 103, "first_name": "Lucius", "last_name": "Holman", "hobby": "Gardening"},
    {"id": 104, "first_name": "Halla", "last_name": "Fulton", "hobby": "Mineral collecting"},
    {"id": 105, "first_name": "Kylee", "last_name": "Black", "hobby": "Archery"},
    {"id": 106, "first_name": "Lacota", "last_name": "Love", "hobby": "Video gaming"},
    {"id": 107, "first_name": "Ross", "last_name": "Bullock", "hobby": "Knapping"},
    {"id": 108, "first_name": "Lucy", "last_name": "Delacruz", "hobby": "Coffee roasting"},
    {"id": 109, "first_name": "Cooper", "last_name": "Jacobson", "hobby": "Flag Football"},
    {"id": 110, "first_name": "Abra", "last_name": "Walters", "hobby": "Water sports"},
    {"id": 111, "first_name": "Perry", "last_name": "Vance", "hobby": "Basketball"},
    {"id": 112, "first_name": "Colton", "last_name": "Pennington", "hobby": "Brazilian jiu-jitsu"},
    {"id": 113, "first_name": "Lane", "last_name": "Fowler", "hobby": "Jigsaw puzzles"},
    {"id": 114, "first_name": "Adena", "last_name": "Rivera", "hobby": "Gardening"},
    {"id": 115, "first_name": "Rogan", "last_name": "Bradford", "hobby": "Tai chi"},
    {"id": 116, "first_name": "Dylan", "last_name": "Bruce", "hobby": "Dance"},
    {"id": 117, "first_name": "Colt", "last_name": "Moran", "hobby": "BASE jumping"},
    {"id": 118, "first_name": "Stewart", "last_name": "Middleton", "hobby": "Inline skating"},
    {"id": 119, "first_name": "Ferris", "last_name": "Barrera", "hobby": "Rock balancing"},
    {"id": 120, "first_name": "Kessie", "last_name": "Simmons", "hobby": "Fashion"},
    {"id": 121, "first_name": "Jessamine", "last_name": "Merritt", "hobby": "Drama"},
    {"id": 122, "first_name": "Honorato", "last_name": "Hardy", "hobby": "Wood carving"},
    {"id": 123, "first_name": "Tarik", "last_name": "Craig", "hobby": "Vehicle restoration"},
    {"id": 124, "first_name": "Clio", "last_name": "Mccarthy", "hobby": "Baseball"},
    {"id": 125, "first_name": "Akeem", "last_name": "Vasquez", "hobby": "Antiquing"},
    {"id": 126, "first_name": "Shana", "last_name": "Hewitt", "hobby": "Crossword puzzles"},
    {"id": 127, "first_name": "Malcolm", "last_name": "Ryan", "hobby": "Hooping"},
    {"id": 128, "first_name": "Lisandra", "last_name": "Durham", "hobby": "Rock balancing"},
    {"id": 129, "first_name": "Rhea", "last_name": "Mcgowan", "hobby": "Rafting"},
    {"id": 130, "first_name": "Carolyn", "last_name": "Figueroa", "hobby": "Handball"},
    {"id": 131, "first_name": "Kiara", "last_name": "Boone", "hobby": "Baseball"},
    {"id": 132, "first_name": "Isaiah", "last_name": "Cruz", "hobby": "Basketball"},
    {"id": 133, "first_name": "Gareth", "last_name": "Giles", "hobby": "Inline skating"},
    {"id": 134, "first_name": "Priscilla", "last_name": "Baldwin", "hobby": "Jogging"},
    {"id": 135, "first_name": "Benedict", "last_name": "Chang", "hobby": "Driving"},
    {"id": 136, "first_name": "Alisa", "last_name": "Lara", "hobby": "Cosplaying"},
    {"id": 137, "first_name": "Hamilton", "last_name": "Mcleod", "hobby": "Camping"},
    {"id": 138, "first_name": "Lani", "last_name": "Middleton", "hobby": "Flower arranging"},
    {"id": 139, "first_name": "Joel", "last_name": "Blankenship", "hobby": "Calligraphy"},
    {"id": 140, "first_name": "Quin", "last_name": "Howe", "hobby": "Rafting"},
    {"id": 141, "first_name": "Evelyn", "last_name": "Patton", "hobby": "Watching movies"},
    {"id": 142, "first_name": "Holmes", "last_name": "Mcconnell", "hobby": "Snowboarding"},
    {"id": 143, "first_name": "Martina", "last_name": "Barry", "hobby": "Macrame"},
    {"id": 144, "first_name": "Jerome", "last_name": "Gibbs", "hobby": "Nordic skating"},
    {"id": 145, "first_name": "Victor", "last_name": "Mckay", "hobby": "Video game collecting"},
    {"id": 146, "first_name": "Vera", "last_name": "Knight", "hobby": "Taekwondo"},
    {"id": 147, "first_name": "Lenore", "last_name": "Taylor", "hobby": "Pet"},
    {"id": 148, "first_name": "Mufutau", "last_name": "Weaver", "hobby": "Woodworking"},
    {"id": 149, "first_name": "Philip", "last_name": "Matthews", "hobby": "Archery"},
    {"id": 150, "first_name": "Dacey", "last_name": "Oneill", "hobby": "Art collecting"},
    {"id": 151, "first_name": "Carly", "last_name": "Tanner", "hobby": "Hunting"},
    {"id": 152, "first_name": "Elvis", "last_name": "Gay", "hobby": "Coffee roasting"},
    {"id": 153, "first_name": "Mariam", "last_name": "Espinoza", "hobby": "Mountain biking"},
    {"id": 154, "first_name": "Neve", "last_name": "Velasquez", "hobby": "Skydiving"},
    {"id": 155, "first_name": "Brent", "last_name": "Potter", "hobby": "Kombucha Brewing"},
    {"id": 156, "first_name": "Ferris", "last_name": "Cooper", "hobby": "Calligraphy"},
    {"id": 157, "first_name": "Kato", "last_name": "Barton", "hobby": "Puzzles"},
    {"id": 158, "first_name": "Jaden", "last_name": "Dorsey", "hobby": "Cabaret"},
    {"id": 159, "first_name": "Doris", "last_name": "Figueroa", "hobby": "Vehicle restoration"},
    {"id": 160, "first_name": "Jolene", "last_name": "Pace", "hobby": "Foraging"},
    {"id": 161, "first_name": "Ainsley", "last_name": "Harrison", "hobby": "Magic"},
    {"id": 162, "first_name": "Chelsea", "last_name": "Mercado", "hobby": "Woodworking"},
    {"id": 163, "first_name": "Avram", "last_name": "Bridges", "hobby": "Leather crafting"},
    {"id": 164, "first_name": "Ashely", "last_name": "Bradshaw", "hobby": "Model building"},
    {"id": 165, "first_name": "Martha", "last_name": "Barber", "hobby": "Kayaking"},
    {"id": 166, "first_name": "Orson", "last_name": "Perry", "hobby": "Candle making"},
    {"id": 167, "first_name": "Bo", "last_name": "Sullivan", "hobby": "Glassblowing"},
    {"id": 168, "first_name": "Merritt", "last_name": "Becker", "hobby": "Pet"},
    {"id": 169, "first_name": "Kermit", "last_name": "Mercado", "hobby": "Cycling"},
    {"id": 170, "first_name": "Kasper", "last_name": "Curry", "hobby": "Stamp collecting"},
    {"id": 171, "first_name": "Desirae", "last_name": "Mcknight", "hobby": "Flower collecting and pressing"},
    {"id": 172, "first_name": "Ahmed", "last_name": "Leblanc", "hobby": "Kitesurfing"},
    {"id": 173, "first_name": "Selma", "last_name": "Miranda", "hobby": "Water sports"},
    {"id": 174, "first_name": "Melvin", "last_name": "Briggs", "hobby": "Skydiving"},
    {"id": 175, "first_name": "Idola", "last_name": "Jacobson", "hobby": "Stone collecting"},
    {"id": 176, "first_name": "Rowan", "last_name": "Mcneil", "hobby": "Inline skating"},
    {"id": 177, "first_name": "Zena", "last_name": "Hinton", "hobby": "Orienteering"},
    {"id": 178, "first_name": "Morgan", "last_name": "Tucker", "hobby": "Pottery"},
    {"id": 179, "first_name": "Hedwig", "last_name": "Davenport", "hobby": "Leather crafting"},
    {"id": 180, "first_name": "Hiram", "last_name": "Moon", "hobby": "Blacksmithing"},
    {"id": 181, "first_name": "Casey", "last_name": "Nicholson", "hobby": "Deltiology (postcard collecting)"},
    {"id": 182, "first_name": "Amos", "last_name": "Chambers", "hobby": "Graffiti"},
    {"id": 183, "first_name": "Amela", "last_name": "Key", "hobby": "Painting"},
    {"id": 184, "first_name": "Dora", "last_name": "Parsons", "hobby": "Glassblowing"},
    {"id": 185, "first_name": "Lamar", "last_name": "Hunter", "hobby": "Creative writing"},
    {"id": 186, "first_name": "Casey", "last_name": "Brennan", "hobby": "Macrame"},
    {"id": 187, "first_name": "Leandra", "last_name": "Holmes", "hobby": "Digital arts"},
    {"id": 188, "first_name": "Dominique", "last_name": "Foreman", "hobby": "Mushroom hunting/Mycology"},
    {"id": 189, "first_name": "Neil", "last_name": "Morrison", "hobby": "Vacation"},
    {"id": 190, "first_name": "Ronan", "last_name": "Cantrell", "hobby": "Jogging"},
    {"id": 191, "first_name": "Wynter", "last_name": "Brennan", "hobby": "Scouting"},
    {"id": 192, "first_name": "Venus", "last_name": "Carter", "hobby": "Antiquities"},
    {"id": 193, "first_name": "Mufutau", "last_name": "Kline", "hobby": "Glassblowing"},
    {"id": 194, "first_name": "Phoebe", "last_name": "Lester", "hobby": "Crocheting"},
    {"id": 195, "first_name": "Macaulay", "last_name": "Ramirez", "hobby": "Skimboarding"},
    {"id": 196, "first_name": "Thaddeus", "last_name": "Jensen", "hobby": "Knife making"},
    {"id": 197, "first_name": "Jarrod", "last_name": "Glass", "hobby": "Auto audiophilia"},
    {"id": 198, "first_name": "Ariel", "last_name": "Sanders", "hobby": "Record collecting"},
    {"id": 199, "first_name": "Lee", "last_name": "Carson", "hobby": "Orienteering"},
    {"id": 200, "first_name": "Kirestin", "last_name": "Cooley", "hobby": "Mountaineering"},
    {"id": 201, "first_name": "Cade", "last_name": "Stanley", "hobby": "Baseball"},
    {"id": 202, "first_name": "Sybill", "last_name": "Calderon", "hobby": "Lockpicking"},
    {"id": 203, "first_name": "George", "last_name": "Barron", "hobby": "Running"},
    {"id": 204, "first_name": "Sophia", "last_name": "Andrews", "hobby": "Mineral collecting"},
    {"id": 205, "first_name": "Harding", "last_name": "Beach", "hobby": "Gunsmithing"},
    {"id": 206, "first_name": "Riley", "last_name": "Cummings", "hobby": "Tai chi"},
    {"id": 207, "first_name": "Janna", "last_name": "Deleon", "hobby": "Sudoku"},
    {"id": 208, "first_name": "Brooke", "last_name": "Randall", "hobby": "Board sports"},
    {"id": 209, "first_name": "Medge", "last_name": "Bennett", "hobby": "Card collecting"},
    {"id": 210, "first_name": "Raya", "last_name": "Stout", "hobby": "Skydiving"},
    {"id": 211, "first_name": "Noelle", "last_name": "Byers", "hobby": "Shopping"},
    {"id": 212, "first_name": "Molly", "last_name": "Collins", "hobby": "Cooking"},
    {"id": 213, "first_name": "Whitney", "last_name": "Petersen", "hobby": "Skydiving"},
    {"id": 214, "first_name": "Wade", "last_name": "Scott", "hobby": "Poi"},
    {"id": 215, "first_name": "Hu", "last_name": "Galloway", "hobby": "Scrapbooking"},
    {"id": 216, "first_name": "Candice", "last_name": "Petersen", "hobby": "Brazilian jiu-jitsu"},
    {"id": 217, "first_name": "Nash", "last_name": "Hayes", "hobby": "Running"},
    {"id": 218, "first_name": "Harper", "last_name": "Hess", "hobby": "Shopping"},
    {"id": 219, "first_name": "Andrew", "last_name": "Jensen", "hobby": "Urban exploration"},
    {"id": 220, "first_name": "Harriet", "last_name": "Jarvis", "hobby": "Painting"},
    {"id": 221, "first_name": "Ruth", "last_name": "Bright", "hobby": "Beekeeping"},
    {"id": 222, "first_name": "Daryl", "last_name": "Snyder", "hobby": "Digital arts"},
    {"id": 223, "first_name": "Sean", "last_name": "Mcneil", "hobby": "Board sports"},
    {"id": 224, "first_name": "Alexandra", "last_name": "Nicholson", "hobby": "LARPing"},
    {"id": 225, "first_name": "Lenore", "last_name": "Nichols", "hobby": "Camping"},
    {"id": 226, "first_name": "Rylee", "last_name": "Lucas", "hobby": "LARPing"},
    {"id": 227, "first_name": "Oprah", "last_name": "Ryan", "hobby": "Kabaddi"},
    {"id": 228, "first_name": "Henry", "last_name": "Davis", "hobby": "Hooping"},
    {"id": 229, "first_name": "Adrienne", "last_name": "Hester", "hobby": "Stamp collecting"},
    {"id": 230, "first_name": "George", "last_name": "Bruce", "hobby": "Action figures"},
    {"id": 231, "first_name": "Ursa", "last_name": "Dillon", "hobby": "Shopping"},
    {"id": 232, "first_name": "Martena", "last_name": "Vance", "hobby": "Hunting"},
    {"id": 233, "first_name": "Chiquita", "last_name": "Pitts", "hobby": "Singing"},
    {"id": 234, "first_name": "MacKenzie", "last_name": "Murphy", "hobby": "Flag Football"},
    {"id": 235, "first_name": "Kay", "last_name": "West", "hobby": "Shooting"},
    {"id": 236, "first_name": "Burton", "last_name": "Workman", "hobby": "Knife making"},
    {"id": 237, "first_name": "Diana", "last_name": "Sharp", "hobby": "Genealogy"},
    {"id": 238, "first_name": "Orson", "last_name": "Sandoval", "hobby": "Photography"},
    {"id": 239, "first_name": "Levi", "last_name": "Ashley", "hobby": "Nordic skating"},
    {"id": 240, "first_name": "Lewis", "last_name": "Fernandez", "hobby": "Jogging"},
    {"id": 241, "first_name": "Norman", "last_name": "Collier", "hobby": "Gardening"},
    {"id": 242, "first_name": "Beau", "last_name": "Nolan", "hobby": "Leather crafting"},
    {"id": 243, "first_name": "Odessa", "last_name": "Gaines", "hobby": "Archery"},
    {"id": 244, "first_name": "Fay", "last_name": "Aguirre", "hobby": "Singing"},
    {"id": 245, "first_name": "Paloma", "last_name": "Boyle", "hobby": "Kabaddi"},
    {"id": 246, "first_name": "Carla", "last_name": "Knowles", "hobby": "Orienteering"},
    {"id": 247, "first_name": "Hanna", "last_name": "Campbell", "hobby": "Ice skating"},
    {"id": 248, "first_name": "Courtney", "last_name": "Hill", "hobby": "Foraging"},
    {"id": 249, "first_name": "Erica", "last_name": "Matthews", "hobby": "Bodybuilding"},
    {"id": 250, "first_name": "Charde", "last_name": "French", "hobby": "Creative writing"},
    {"id": 251, "first_name": "Iola", "last_name": "Harrington", "hobby": "Origami"},
    {"id": 252, "first_name": "Philip", "last_name": "Carey", "hobby": "Worldbuilding"},
    {"id": 253, "first_name": "Bert", "last_name": "Cummings", "hobby": "Lockpicking"},
    {"id": 254, "first_name": "Lance", "last_name": "Herrera", "hobby": "Do it yourself"},
    {"id": 255, "first_name": "Merritt", "last_name": "Stevenson", "hobby": "Ice skating"},
    {"id": 256, "first_name": "Tate", "last_name": "Battle", "hobby": "Creative writing"},
    {"id": 257, "first_name": "Phyllis", "last_name": "Taylor", "hobby": "Rafting"},
    {"id": 258, "first_name": "Nina", "last_name": "Lopez", "hobby": "Homebrewing"},
    {"id": 259, "first_name": "Shea", "last_name": "Dickerson", "hobby": "Acting"},
    {"id": 260, "first_name": "Hasad", "last_name": "Buck", "hobby": "Air sports"},
    {"id": 261, "first_name": "Carly", "last_name": "Nielsen", "hobby": "Leather crafting"},
    {"id": 262, "first_name": "Timothy", "last_name": "Barker", "hobby": "Couponing"},
    {"id": 263, "first_name": "Maris", "last_name": "Ray", "hobby": "Kabaddi"},
    {"id": 264, "first_name": "Abdul", "last_name": "Clayton", "hobby": "Stand-up comedy"},
    {"id": 265, "first_name": "Patience", "last_name": "Sampson", "hobby": "Letterboxing"},
    {"id": 266, "first_name": "Julian", "last_name": "Beach", "hobby": "Lapidary"},
    {"id": 267, "first_name": "Leila", "last_name": "Vance", "hobby": "Flower collecting and pressing"},
    {"id": 268, "first_name": "Cora", "last_name": "Ewing", "hobby": "Dowsing"},
    {"id": 269, "first_name": "Zephr", "last_name": "Clayton", "hobby": "Bodybuilding"},
    {"id": 270, "first_name": "Fitzgerald", "last_name": "Ballard", "hobby": "Slacklining"},
    {"id": 271, "first_name": "Hamish", "last_name": "Chambers", "hobby": "3D printing"},
    {"id": 272, "first_name": "Emerald", "last_name": "Briggs", "hobby": "Mushroom hunting/Mycology"},
    {"id": 273, "first_name": "Wynter", "last_name": "Valencia", "hobby": "Watching movies"},
    {"id": 274, "first_name": "Portia", "last_name": "Chen", "hobby": "Lego building"},
    {"id": 275, "first_name": "Kelsey", "last_name": "Horton", "hobby": "Painting"},
    {"id": 276, "first_name": "Christian", "last_name": "Battle", "hobby": "Fashion"},
    {"id": 277, "first_name": "Belle", "last_name": "Bray", "hobby": "Board sports"},
    {"id": 278, "first_name": "Wanda", "last_name": "Burnett", "hobby": "Woodworking"},
    {"id": 279, "first_name": "Mark", "last_name": "Trujillo", "hobby": "Deltiology (postcard collecting)"},
    {"id": 280, "first_name": "Rowan", "last_name": "Everett", "hobby": "Tai chi"},
    {"id": 281, "first_name": "Raja", "last_name": "Mendez", "hobby": "Surfing"},
    {"id": 282, "first_name": "Madison", "last_name": "Nolan", "hobby": "3D printing"},
    {"id": 283, "first_name": "Virginia", "last_name": "Hoover", "hobby": "Skateboarding"},
    {"id": 284, "first_name": "Tara", "last_name": "Lindsay", "hobby": "Mountaineering"},
    {"id": 285, "first_name": "Miriam", "last_name": "Bell", "hobby": "Amateur radio"},
    {"id": 286, "first_name": "Lucas", "last_name": "Estrada", "hobby": "Taekwondo"},
    {"id": 287, "first_name": "Idola", "last_name": "Robertson", "hobby": "Dowsing"},
    {"id": 288, "first_name": "Colin", "last_name": "Roberts", "hobby": "Bodybuilding"},
    {"id": 289, "first_name": "Upton", "last_name": "Tran", "hobby": "Rafting"},
    {"id": 290, "first_name": "Caleb", "last_name": "Koch", "hobby": "Mineral collecting"},
    {"id": 291, "first_name": "Scarlett", "last_name": "York", "hobby": "Orienteering"},
    {"id": 292, "first_name": "Audra", "last_name": "Rich", "hobby": "Slacklining"},
    {"id": 293, "first_name": "Kirestin", "last_name": "Sosa", "hobby": "Kabaddi"},
    {"id": 294, "first_name": "Sybil", "last_name": "Rodriguez", "hobby": "Driving"},
    {"id": 295, "first_name": "April", "last_name": "Carlson", "hobby": "Letterboxing"},
    {"id": 296, "first_name": "Clark", "last_name": "Sweet", "hobby": "Stamp collecting"},
    {"id": 297, "first_name": "Garth", "last_name": "Blanchard", "hobby": "Rafting"},
    {"id": 298, "first_name": "Genevieve", "last_name": "Whitley", "hobby": "Sailing"},
    {"id": 299, "first_name": "Jonah", "last_name": "Gutierrez", "hobby": "Running"},
    {"id": 300, "first_name": "Penelope", "last_name": "Huber", "hobby": "Mineral collecting"}
  ];
  
  return {
  	getPeople: function() {
      var deferred = $q.defer();
      deferred.resolve(people);
      return deferred.promise;
    }
  };
});

fiddle.manifest

name: Simple table with HTML+Angular.js
description: Simple HTML table with sorting, filtering, and pagination implemented with Angular.js
authors:
  - Ken Bellows
resources:
  - https://code.jquery.com/jquery-2.2.1.min.js
  - https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css
  - https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js
  - https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js
normalize_css: no
wrap: b