Nested ng-repeat with vertical table
<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>