title: Group item detail using AngularJs ng-repeat
body: <p>I would like to perform a group by function inside of an ng-repeat</p>
  
  <p>Given the following data:</p>
  
  <pre><code>var items = [];
  items.push({ id: 1, widgetId: 54, colorId: 45 });
  items.push({ id: 2, widgetId: 54, colorId: 72 });
  items.push({ id: 3, widgetId: 54, colorId: 29 });
  items.push({ id: 4, widgetId: 55, colorId: 67 });
  items.push({ id: 5, widgetId: 55, colorId: 29 });
  items.push({ id: 6, widgetId: 56, colorId: 29 });
  items.push({ id: 7, widgetId: 56, colorId: 72 });
  items.push({ id: 8, widgetId: 57, colorId: 75 });
  </code></pre>
  
  <p>I would like an ng-repeat that results in the following presentation </p>
  
  <pre><code>widgetId 54    colorId: 45 colorId: 72 colorId 29
  widgetId 55    colorId: 67 colorId: 29
  widgetId 56    colorId: 29 colorId: 72
  widgetId 57    colorId: 75
  </code></pre>
  
  <p>...and markup</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div&gt;widgetId: 54&lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;colorId: 45&lt;/div&gt;
          &lt;div&gt;colorId: 72&lt;/div&gt;
          &lt;div&gt;colorId: 29&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div&gt;widgetId: 55&lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;colorId: 67&lt;/div&gt;
          &lt;div&gt;colorId: 29&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div&gt;widgetId: 56&lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;colorId: 29&lt;/div&gt;
          &lt;div&gt;colorId: 72&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div&gt;widgetId: 57&lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;colorId: 75&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any suggestions that don't include creating separate arrays?  The data is coming to me this way and it would be nice to avoid manipulating it.</p>