title: 2D loops for building a table
body: <p>I want to loop through a two-dimensional structure in angularjs to display it in a table. The data looks as follows:</p>
  
  <pre><code>data = {
      "keyA": ["valueA", "valueB"],
      "keyB": ["valueC", "valueD"]
  }
  </code></pre>
  
  <p>the output should look like this:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;keyA&lt;/th&gt;
          &lt;td&gt;valueA&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;keyA&lt;/th&gt;
          &lt;td&gt;valueB&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;keyB&lt;/th&gt;
          &lt;td&gt;valueC&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;keyB&lt;/th&gt;
          &lt;td&gt;valueD&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>at the moment my angular enriched html doesn't work and looks as follows:</p>
  
  <pre><code>&lt;table&gt;
      &lt;div ng:repeat="(key, values) in data"&gt;
      &lt;div ng:repeat="value in values"&gt;
      &lt;tr&gt;
          &lt;td&gt;{{key}}&lt;/td&gt;
          &lt;td&gt;{{value}}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>In this case I'm using the <code>&lt;div&gt;</code> element, but it doesn't work because obviously a <code>&lt;div&gt;</code> doesn't belong into a <code>&lt;table&gt;</code> like that. Is there some find of a No-Op-Element, which I have to use for loops like this? </p>