javascript - How do I use AngularJS to alphabetize a contact list with headers as the first character? -

i have list such this

aperson

cperson

aperson2

bperson

and want appear so

a

aperson aperson2

b

bperson

c

cperson

i found post here explaining it: http://pmosd.blogspot.com/2013/07/headers-in-angularjs-ng-repeats.html

but angular noob, i'm not sure place function , filter in js file , how code html. tried following post linked, unordered list contact names not show in browser. here current js , html files. have tried placing filter , function in various places, recent attempt.

directory.js:

'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'     }];  });   myapp.filter("headerchunk", function () {     return function (orig, same, getchunkid) {         if (!(orig instanceof array)) return orig;         if (orig.length == 0) return orig;          var result = [];          var cur = [];          var = 0         (i = 0; < orig.length; i++) {             if (i == 0 || same(orig[i], orig[i - 1])) {                 cur.push(orig[i]);             } else {                 result.push({                     id: getchunkid(orig[i - 1]),                     items: cur                 });                  cur = [orig[i]];             }         }          result.push({             id: getchunkid(orig[orig.length - 1]),             items: cur         });          (i = 0; < result.length; i++) {             result[i].$$hashkey = i;         }          return result;     } });  $scope.filtereddata = $filter("headerchunk")(     $scope.filtereddata,      // first argument function 'same' responsible determining     // whether 2 objects of collection belong in same category. desire     // 2 persons go in same category names start same first     // letter:     function (p1, p2) {         return (p1.name.charat(0) == p2.name.charat(0));     },      // second function 'getchunkid' responsible "naming" resulting chunk.     // wish chunks identified letter constituents'     // names start with:     function (p) {         return p.name.charat(0);     } ); 

directory.html:

<div ng-repeat="group in contacts | orderby:name | headerchunk:samefunc:idfunc"> <ul>     <li ng-repeat="item in group.items">       {{item.lname}}, {{item.fname}}<br>       {{item.location}}         <hr>     </li> </ul> 

not sure anymore.

did read comments? first person did underscore.js, underscore.js or lodash.js.

// include 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]; }); });  // don't need filter codes