title: Double ng-repeat to flatten out nested object
body: <p>I have a use in case which I had solved up 'til now with <code>ng-repeat-start</code>.  It currently looks like this:</p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>$scope.providers = [
    'Site Hosting',
    'Best Hosting',
    'Fantastic Hosting'
  ];
  
  $scope.providerColumns = {
    price: {
      text: 'Price',
      exposed: true
    },
    site: {
      text: 'Website',
      exposed: true
    },
    phone: {
      text: 'Phone Number',
      exposed: false
    }
  };
  </code></pre>
  
  <p><strong>Template</strong></p>
  
  <pre><code>&lt;div class='table-header-row'&gt;
    &lt;div class='first-header-cell' ng-repeat='obj in firstCellsHeaders'&gt;
      {{obj.text}}
    &lt;/div&gt;
    &lt;div class='middle-header-cell' ng-repeat-start='prov in providers' ng-if='providerColumns.price.exposed'&gt;
      {{prov}} {{providerColumns.price.text}}
    &lt;/div&gt;
    &lt;div class='middle-header-cell' ng-if='providerColumns.site.exposed'&gt;
      {{prov}} {{providerColumns.site.text}}
    &lt;/div&gt;
    &lt;div class='middle-header-cell' ng-repeat-end ng-if='providerColumns.phone.exposed'&gt;
      {{prov}} {{providerColumns.phone.text}}
    &lt;/div&gt;
    &lt;div class='last-header-cell' ng-repeat='obj in lastCellsHeaders'&gt;
      {{obj.text}}
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='table-row'&gt;
    &lt;div class='first-cells' ng-repeat='obj in firstCells'&gt;
      {{obj.text}}
    &lt;/div&gt;
    &lt;div class='middle-cells' ng-repeat-start='prov in providers' ng-if='providerColumns.price.exposed'&gt;
      {{data[prov].price}}
    &lt;/div&gt;
    &lt;div class='middle-cells' ng-if='providerColumns.site.exposed'&gt;
      {{data[prov].site}}
    &lt;/div&gt;
    &lt;div class='middle-cells' ng-repeat-end ng-if='providerColumns.phone.exposed'&gt;
      {{data[prov].phone}}
    &lt;/div&gt;
    &lt;div class='last-cells' ng-repeat='obj in lastCells'&gt;
      {{obj.texLine2}}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It's essentially a table built out of div's in order to facilitate reordering the columns after angular finishes rendering.</p>
  
  <p>Now I've realized the object represented in <code>ng-repeat-start</code> is more dynamic than I previously thought, and I want to be able to have a <em>squared</em> <code>ng-repeat</code>, i.e. nested repeat without nested elements, much like the oft-applied solution of using <code>ng-repeat</code> on a <code>tbody</code> element, and then an additional <code>ng-repeat</code> on the <code>tr</code> elements within it, which essentially is a flattened nesting effect.  I need a solution for horizontal elements, preferably <code>div</code>s.  I can't have them tied together in any way, however, so no nesting of <code>div</code>s or anything like that.  Ideally it would look something like this:</p>
  
  <pre><code>&lt;div ng-repeat='prov in providers' ng-repeat='col in providerColumns' ng-if='col.exposed'&gt;
    {{data[prov][col]}}
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas?</p>