sorting-AngularJS.html
<html ng-app>
<head>
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>
</head>
<body ng-controller="PhoneListCtrl">
<div class="container-fluid">
<div class="row-fluid">
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="snippet">Snippet</option>
<option value="age">Newest</option>
<option value="-name">Desc Alphabetical</option>
<option value="-snippet">Desc Snippet</option>
<option value="-age">Desc Newest</option>
</select>
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
<p>Total number of phones: {{phones.length}}</p>
<div id="status">Current filter: {{query}} || and Order by {{orderProp}}</div>
<hr />
<table border="1">
<tr>
<th>Row Number</th>
</tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
<td>{{'Row : ' + i}}</td>
</tr>
</table>
<hr />
</body>
</html>
controllers.js
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S.",
"age": 0},
{"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet.",
"age": 1},
{"name": "MOTOROLA XOOM™",
"snippet": "New Tablet.",
"age": 2}
];
$scope.orderProp = 'snippet';
$scope.hello = "Hello, World!"
}