title: Nested ng-repeat with vertical table
body: <p>I have a json array that contains x number elements where each one is another json array. I want to iterate over this array using a nested <code>ng-repeat</code>, something like <a href="https://stackoverflow.com/questions/19839743/nested-ng-repeat">nested ng-repeat</a>.</p>
  
  <p>My problem is I want to do it in a "vertical table": </p>
  
  <pre><code>&lt;!-- for the big json --&gt;
  &lt;table ng-repeat = "obj in data "style="width:100%"&gt;
    &lt;tr&gt;
      &lt;th&gt;data01&lt;/th&gt;
      &lt;!--for thr first object in the big json --&gt;
      &lt;tr ng-repeat = "var in obj"&gt;{{var}}&lt;/tr&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;!--for the second object in the big json --&gt;
      &lt;th&gt;data02&lt;/th&gt;
      &lt;tr ng-repeat = "var in obj"&gt;{{var}}&lt;/tr&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>data </p>
  
  <pre><code>[ "data01":[{"firstName":"John", "lastName":"Doe"}], "data02":["{"firstName":"Anna", "lastName":"Smith"}], "data03":[{"firstName":"Peter","lastName":"Jones"}] ]
  </code></pre>
  
  <p>So the first <code>ng-repeat</code> will be for each object, and the second will inseart values to the 'right' side of the table. </p>
  
  <p>I can't find the correct way to organize the HTML elements so it will display them in this order. Here is an <a href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headers" rel="nofollow noreferrer">example</a> for what I mean by "vertical table".  </p>