var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.reverseSort = false;
$scope.orderByField = "theDate";
$scope.dateList = [
{id: 1, theDate: new Date(2015, 3, 7)},
{id: 2, theDate: new Date(2015, 4, 5)},
{id: 3, theDate: null},
{id: 4, theDate: new Date(2014, 10, 14)},
{id: 5, theDate: null},
{id: 6, theDate: new Date()},
{id: 7, theDate: null},
{id: 8, theDate: new Date(2017, 10, 10)},
{id: 9, theDate: null}
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table style="border: 1px solid;">
<thead>
<tr>
<th style="width: 50px; text-align: left;">ID</th>
<th style="width: 200px; text-align: left;"><a href="" ng-click="orderByField='theDate'; reverseSort = !reverseSort">The Date</a>
<span ng-show="orderByField == 'theDate'">
<span ng-show="!reverseSort">Sorted Asc</span>
<span ng-show="reverseSort">Sorted Desc</span>
</span>
</th>
</tr>
</thead>
<tr ng-repeat="vm in dateList | orderBy:orderByField:reverseSort">
<td>
{{::vm.id}}
</td>
<td>
{{::vm.theDate | date:'medium' }}
</td>
</tr>
</table>
</body>
</html>
/* Put your css in here */