title: Sorting data into categories and showing category headlines
body: <p>In AngularJS, for the given <em>dataset of animals</em>, what is the best way to produce both the <em>personality view</em> and the <em>size view</em>?</p>
  
  <hr>
  
  <p><strong>Personality view</strong></p>
  
  <pre><code>Animals by personality:
  Cute
      Cat
      Dog
  Scary
      Snake
      Shark
  </code></pre>
  
  <hr>
  
  <p><strong>Size view</strong></p>
  
  <pre><code>Animals by size:
  Small
      Cat
  Medium
      Dog
      Snake
  Large
      Shark
  </code></pre>
  
  <hr>
  
  <p><strong>Dataset</strong></p>
  
  <pre><code>$scope.animals = [
      { 
          name: 'Cat',
          pers: 'cute',
          size: 'small'
      },
      { 
          name: 'Dog',
          pers: 'cute',
          size: 'medium'
      },
      { 
          name: 'Snake',
          pers: 'scary',
          size: 'medium'
      },
      { 
          name: 'Shark',
          pers: 'scary',
          size: 'large'
      }
  ];
  </code></pre>
  
  <hr>
  
  <p><strong>What I currently do</strong></p>
  
  <p>For the personality view, I currently use the following code:</p>
  
  <pre><code>&lt;h1&gt;Animals by personality&lt;/h1&gt;
  
  &lt;h2&gt;Cute&lt;/h2&gt;
  &lt;li ng-repeat="animal in animals | filter: 'cute'"&gt;
      {{ animal.name }}
  &lt;/li&gt;
  
  &lt;h2&gt;Scary&lt;/h2&gt;
  &lt;li ng-repeat="animal in animals | filter: 'scary'"&gt;
      {{ animal.name }}
  &lt;/li&gt;
  </code></pre>
  
  <p>And then for the size view, I copy the above code and change the h1, h2s and filters. </p>
  
  <p>The whole point here is: Sort the dataset by category, but display the category headline for each category.</p>
  
  <p><em>So my question is, this very much seams like a known problem? How to best solve it?</em></p>