Angular filter grouping with promise

Example demonstrating how to perform group filtering using Angular filters and a promise.

HTML

<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.1.0-SNAPSHOT.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div ng-controller="Main">
    <div ng-repeat="team in teams | limitTo:pageSize | startFrom:(currentPage - 1)*pageSize">
        <b>{{team}}</b>
        <li ng-repeat="player in players | filter: {team: team}">{{player.name}}</li>        
    </div>

    <pagination rotate="true" num-pages="noOfPages" current-page="currentPage" max-size="maxSize" boundary-links="true"></pagination>

</div>

CSS

li {
    margin-left: 1em;
}

JavaScript

angular.module('test', ['ui.bootstrap']);
function Main($scope, $q) {
    $scope.players = [{name: 'Gene', team: 'team alpha'},
                    {name: 'George', team: 'team beta'},
                    {name: 'Steve', team: 'team gamma'},
                    {name: 'Paula', team: 'team beta'},
                    {name: 'George', team: 'team delta'},
                    {name: 'Steve', team: 'team zeta'},
                    {name: 'Paula', team: 'team eta'},
                    {name: 'George', team: 'team teta'},
                    {name: 'Steve', team: 'team iota'},
                    {name: 'Paula', team: 'team kappa'},
                    {name: 'George', team: 'team lambda'},
                    {name: 'Steve', team: 'team zeta'},
                    {name: 'Paula', team: 'team zeta'},
                    {name: 'George', team: 'team beta'},
                    {name: 'Steve', team: 'team omega'},
                    {name: 'Paula', team: 'team beta'},
                    {name: 'Scruath of the 5th sector', team: 'team gamma'}];

    // create a deferred object to be resolved later
    var teamsDeferred = $q.defer();

    // return a promise. The promise says, "I promise that I'll give you your
    // data as soon as I have it (which is when I am resolved)".
    $scope.teams = teamsDeferred.promise;

    // create a list of unique teams
    var uniqueTeams = unique($scope.players, 'team');

    // resolve the deferred object with the unique teams
    // this will trigger an update on the view
    teamsDeferred.resolve(uniqueTeams);

    // function that takes an array of objects
    // and returns an array of unique valued in the object
    // array for a given key.
    // this really belongs in a service, not the global window scope
    function unique(data, key) {
        var result = [];
        for (var i = 0; i < data.length; i++) {
            var value = data[i][key];
            if (result.indexOf(value) == -1) {
               ...