Titles in Collection-Repeat Help


I am working on a company directory app that contains two large listings (Alphabetical & By Department). There are over 200 employees at the company so the listing is pretty long. I found that ng-repeat worked and looked great - however it too far too long to load the page.

From my research, it appears that I should be using Collection-Repeat to load only the visible data allowing the app to respond much quicker to scrolling and such. I am fairly new to angular.js and JSON (obtained by $http) and could use a few pointers in how to achieve my desired result:

My repeat code looks like this:

<div ng-repeat="row in data | orderBy: 'alpha'">  
    <div class="item item-divider" ng-show="CreateHeader(row.alpha)">

    <a class="item item-thumbnail-left item-text-wrap">
        <img ng-src-i="data:image/jpeg;base64,{{row.image}}">
        <h2><{{row.firstname}} {{row.lastname}}</h2>


My “CreateHeader” function operated with the following code:

$scope.CreateHeader = function(title) {
    showHeader = (title!=$scope.currentTitle); 
        $scope.currentTitle = title;
    return showHeader;

My JSON data is in the following format:

      "jobtitle":"Executive Assistant",
      "department":"Corporate Management",  
      "image":"<Base64 Code Here>"

Here is a screen shot of what my application looks like - thus far, and what I am trying to achieve with Collection-Repeat:

Any tips on how I can replicate my item-dividers within a Collection-Repeat?

Thanks in advance!


Although it isn’t thoroughly documented in the collection-repeat docs, there is a codepen example that demonstrates dividers.

Codepen: http://codepen.io/ionic/pen/mFygh