title: Adding auto-headers to ng-repeat in Angularjs
body: <p>I have a problem trying to get auto-headers into an ng-repeat created list. The code below creates a header based on first letter of name changing in sorted list. The code below produces the headers but when I filter on the list I get issues where I get double-ups with the header letters.  Can anyone help?</p>
  
  <pre><code>&lt;li ng-repeat="people in address | filter:query | orderBy:orderProp" alphabetical="{{people.name[0]}}" &gt;
                      &lt;alphabetical-headers-from-name stem="people" listno="$index" path="path" &gt;&lt;/alphabetical-headers-from-name&gt;
                  &lt;/li&gt;
  
  
  var previousRefFirstLetter = "";
  
  myapp.directive('alphabeticalHeadersFromName', function ($compile) {
      return {
      restrict: 'E',
          terminal: true,
          scope: { stem: '=',
          listno: '=',
          path: '='},
  
          link: function (scope, element, attrs) {
              var boolAddHeader = false;
              //Get current element reference first letter
              if(scope.stem.name === undefined || scope.stem.name === null){
                  var refFirstLetter = "";
              }else{
                  var refFirstLetter = scope.stem.name.charAt(0);
              }
              //if this is the first element of the list, set the comparison letter to ""
              if(scope.listno === 0){
                 previousRefFirstLetter = "";
              }
              var prevFirstLetter = previousRefFirstLetter
  
              //compare current letter with previous letter. If there is a difference, we will need to create a header.
              if (previousRefFirstLetter.toUpperCase() !== refFirstLetter.toUpperCase()){
                  boolAddHeader = true;
                  previousRefFirstLetter = refFirstLetter;
              }
  
              //Create header (if required)
              if(boolAddHeader){
                  element.append('&lt;li class="heading"&gt;'+refFirstLetter+'&lt;/li&gt;');
              }
              //Create list element.
              element.append('&lt;a href="'+ scope.path + scope.stem.id +'"&gt;'+scope.stem.name+'&lt;/a&gt;');
              $compile(element.contents())(scope.$new());
          }
      }
  });
  </code></pre>