Simple Group-By

How to do a group-by in Angular using external AngularFilter library. Base example for a design/implementation problem I am having. Looking for the correct Design Pattern in AngularJS.

by Andrew Philips

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.8/angular-filter.min.js"></script>
<div ng-controller="MyCtrl">
  <table class="table-condensed">
    <thead><tr><th colspan=3><h3>Garbage Mashers</h3></th></tr>
        <tr><th>Level</th><th>Masher</th><th>Power</th></tr></thead>
    <tbody ng-repeat="(level, mashers) in allMashers | groupBy: 'level'">
        <tr ng-repeat="masher in mashers">
            <td><span ng-if="$first==1">{{masher.level}}</span></td>
            <td>{{masher.name}}</td>
            <td class="power">{{powerToString(masher.power)}}</td>
        </tr>
    </tbody>
</table>
</div>

CSS

th, .power { text-align: center }
tr th { font-weight: bold }
td { padding: 4px }

JavaScript

(function () {
    angular.module('myApp', ['angular.filter'])
        .controller('MyCtrl', function ($scope, $parse) {
            $scope.allMashers = {
                1: { id: 1, name: "3263827", power: 1, level: "Detention" },
                2: { id: 2, name: "10 Fwd",  power: 1, level: "Club"  },
                3: { id: 3, name: "00001",   power: 0, level: "Overbridge" },
                4: { id: 4, name: "8675309", power: 1, level: "Club" },
                5: { id: 5, name: "THX1138", power: 0, level: "Detention" }
             };

            $scope.powerToString = function(p) { return {'-1': 'unknown', '0': 'off', '1': 'on'}[p]; };
        })
    ;
})();