Ionic Dynamic List Divider

Question

I have been stumped on this problem for a while now, so I am hoping you can get me in the right direction.

My angular factory returns an object which looks like this

Answer 1

I'm not sure if this is the best way of doing it, but I built a CodePen that does this:

• Take an original list (this would be your real data)
• Modify the list by creating additional items for unique starting letters
• In the view, we see if our data is a letter, and if so, treat it as a list divider

This is kind of like how one of their pens work (http://codepen.io/ionic/pen/uJkCz). It feels slightly wrong to me, but it seems to work well. Here is the controller portion:

.controller('RootCtrl', function($scope) {

  //orig data
  var list = [];
  list.push({name:"Gary"});
  list.push({name:"Gosh"});
  list.push({name:"Ray"});
  list.push({name:"Sam"});
  list.push({name:"Sandy"});

  $scope.list = [];
  var lastChar = '';
  for(var i=0,len=list.length; i

And then the view checks to see if the data is a person vs a letter. Again, this feels a bit lame, but...

  
    {{person.name}}
  

You can run this here: http://codepen.io/cfjedimaster/pen/HqrBf