title: Angular: Getting list with ng-repeat with dividers / separators
body: <p>Still pretty new with Angular, just finding my way around.</p>
  
  <p>I'm using ng-repeat to output an alphabetised list of names. I'd like to add dividers within this list that act as labels.</p>
  
  <p>Example:</p>
  
  <pre><code>--------
  A
  --------
  Author 1
  Author 2
  
  --------
  B
  --------
  Author 3
  Author 4
  etc
  </code></pre>
  
  <p>My thinking is to use nested ng-repeats to loop through the alphabet, getting an object with the authors for that specific letter with a second ng-repeat. Here's what I have so far: </p>
  
  <pre><code>&lt;div data-ng-repeat="letter in alphabet"&gt;
      &lt;div class="item item-divider"&gt;
          {{letter}}
      &lt;/div&gt;
      &lt;ul&gt;
          &lt;li data-ng-repeat="speaker in GetSpeakers(letter)" type="item-text-wrap" href="#/speaker/{{speaker.ID}}"&gt;
              {{speaker.title}}
          &lt;/li&gt;
      &lt;/ul&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller code:</p>
  
  <pre><code>.controller('SpeakersCtrl', function($scope, $routeParams, StorageHandler) {
  
      $scope.GetSpeakers = function(letter) {
          // Get list of authors for that letter
          console.log('test '+letter);
      };
  
      $scope.alphabet = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
  })
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/t6Xq8/" rel="nofollow">http://jsfiddle.net/t6Xq8/</a></p>
  
  <p>I have a couple of questions. </p>
  
  <ol>
  <li>In general, is using a nested ng-repeat a good approach for this
  problem, or does Angular have built-in specifically for this purpose? <a href="http://thenittygritty.co/angularjs-pitfalls-using-scopes" rel="nofollow">Some sources</a> also say using a function in ng-repeat is a bad idea. But it does work so I'm confused as to why I shouldn't use this.</li>
  <li>When looking at the console, GetSpeakers gets called twice in this example and I can't figure out why? </li>
  <li>How should I return an object to the scope within the GetSpeakers function, while preventing overloading the $scope?</li>
  </ol>