Did you read the comments? the first person did it with underscore.js, so do it with underscore.js or lodash.js.
// include the script
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<div ng-repeat="(k,v) in sortedcontacts">
<span>{{k}}</span>
<ul>
<li ng-repeat="item in v">
{{item.lname}}, {{item.fname}}<br>
{{item.location}}
<hr>
</li>
</ul>
</div>
'use strict';
var myApp = angular.module('myappname');
myApp.controller('DirectoryCtrl', function ($scope) {
$scope.contacts = [
{'fname': 'Randy',
'lname':'Johnson',
'location': 'Seattle, WA'},
{'fname': 'Andy',
'lname':'Pettite',
'location': 'Bronx, NY'},
{'fname': 'Jon',
'lname':'Lester',
'location': 'Boston, MA'}
];
$scope.sortedcontacts = _.groupBy($scope.contacts, function(item) {return item.fname[0]; });
});
// you don't need those filter codes