AngularJS - sorting(using orderby filter) table data example with demo

By Hardik Savani | June 27, 2016 | Category : Angular

Data sort in one of the most important and essential component in any web based projects. we can find data in order by any field then we can find any data easily from reach data.

In this post, we can learn how to sort table row using AngularJS orderby filter. in bellow example you can see we have two column one for language and another for total developer. So if you click on table heading then you can sort data using orderBy filert. You can learn and see bellow example.


<html lang="en-US">

<link rel="stylesheet" href="">

<script src=""></script>


<div ng-app="myApp" ng-controller="customersCtrl">

<h2 class="text-center">AngularJS sortable table example</h2>

<div class="text-center">

<strong>Note:</strong> click on table heading and change order


<div class="container">

<table class="table table-bordered">


<th ng-click="sortBy('language')">Language</th>

<th ng-click="sortBy('developer')">Total Developer</th>


<tr ng-repeat="x in names | orderBy:sortField:reverseOrder">

<td>{{ x.language }}</td>

<td>{{ x.developer }}</td>






var app = angular.module('myApp', []);

app.controller('customersCtrl', function($scope, $http) {

$scope.names = [

{'language': 'PHP', 'developer': '11' },

{'language': 'Laravel', 'developer': '12'},

{'language': 'Angular JS', 'developer': '23'},

{'language': 'Jquery', 'developer': '25'},

{'language': 'Java', 'developer': '21'},

{'language': 'Facebook API', 'developer': '26'},


$scope.reverseOrder = true;

$scope.sortField = 'developer';

$scope.sortBy = function(sortField) {

$scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;

$scope.sortField = sortField;






You can try....

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.