title: Create Table from JSON Data with angularjs and ng-repeat
body: <p>I have the following data as JSON:</p>
  
  <pre><code>{
    "Workout1": {
      "Name": "First",
      "Rounds": [
        {
          "Exercises": [
            {
              "Name": "Exercise1",
              "Repeat": 10
            },
            {
              "Name": "Exercise2",
              "Repeat": 10
            },
            {
              "Name": "Exercise3",
              "Repeat": 10
            }
          ]
        },
        {
          "Exercises": [
            {
              "Name": "Exercise1",
              "Repeat": 20
            },
            {
              "Name": "Exercise2",
              "Repeat": 20
            },
            {
              "Name": "Exercise3",
              "Repeat": 20
            }
          ]
        },
        {
          "Exercises": [
            {
              "Name": "Exercise1",
              "Repeat": 30
            },
            {
              "Name": "Exercise2",
              "Repeat": 30
            },
            {
              "Name": "Exercise3",
              "Repeat": 30
            }
          ]
        }
      ]
    }
  }
  </code></pre>
  
  <p>and I want to display it as a html table with angularjs and ng-repeat.
  so that I get the following table:</p>
  
  <pre><code>&lt;table class="table"&gt;
      &lt;tr&gt;
          &lt;th&gt;Round1&lt;/th&gt;
          &lt;th&gt;Round2&lt;/th&gt;
          &lt;th&gt;Round3&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;10 Exercise1&lt;/td&gt;
          &lt;td&gt;20 Exercise1&lt;/td&gt;
          &lt;td&gt;30 Exercise1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;10 Exercise2&lt;/td&gt;
          &lt;td&gt;20 Exercise2&lt;/td&gt;
          &lt;td&gt;30 Exercise2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;10 Exercise3&lt;/td&gt;
          &lt;td&gt;20 Exercise3&lt;/td&gt;
          &lt;td&gt;30 Exercise3&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>for table preview:
  <a href="http://jsfiddle.net/54pD8/" rel="noreferrer">http://jsfiddle.net/54pD8/</a></p>
  
  <p>my problem that the html table is working row-based.
  I can iterate with ng-repeat through my Rounds and then through my excercises
  but for creating a table I need always the first of each exercises then the second of each exercises and so on.</p>
  
  <p>Can someone help me with this problem?</p>
  
  <p>ps. if you have an idea for better layout for this data in json, your suggestions are welcome, I'm new to json (and angularjs).</p>