<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<script data-require="angular-filter@0.5.7" data-semver="0.5.7" src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body >
<div ng-controller="homeCtrl as vm">
<h1>{{vm.title}}</h1>
<h4> order list</h4>
<table class ="table" >
<thead>
<th>category</th>
<th>id</th>
<th>name</th>
</thead>
<tbody ng-repeat="group in vm.groups | groupBy:'category' | toArray:true">
<tr ng-repeat="item in group | orderBy:'-user.name'">
<td>
{{item.category}}
</td>
<td>
{{item.id}}
</td>
<td>
{{item.user.name}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
// Code goes here
var app = angular.module('myApp', ['angular.filter']);
app.controller("homeCtrl",function($scope){
var vm = this;
vm.title ="Angular - filters / groupBy / orderBy";
vm.groups = [
{ category: 'alpha', id: 2, user:{name:'thiru'} },
{ category: 'beta', id: 3, user:{name:'khiru'} },
{ category: 'gamma', id: 0 ,user:{name:'zthiru'}},
{ category: 'alpha', id: 4, user:{name:'athiru'} },
{ category: 'beta', id: 5 , user:{name:'thiru'}},
{ category: 'gamma', id: 1, user:{name:'athiru'} }
];
// retrieves the min 'id' of a collection, used for the group ordering.
// you can use lodash instead. e.g: _.min(arr, 'id')
})
/* Styles go here */