javascript - 2D loops for building a table -

i want loop through two-dimensional structure in angularjs display in table. data looks follows:

data = {     "keya": ["valuea", "valueb"],     "keyb": ["valuec", "valued"] } 

the output should this:

<table>     <tr>         <th>keya</th>         <td>valuea</td>     </tr>     <tr>         <th>keya</th>         <td>valueb</td>     </tr>     <tr>         <th>keyb</th>         <td>valuec</td>     </tr>     <tr>         <th>keyb</th>         <td>valued</td>     </tr> </table> 

at moment angular enriched html doesn't work , looks follows:

<table>     <div ng:repeat="(key, values) in data">     <div ng:repeat="value in values">     <tr>         <td>{{key}}</td>         <td>{{value}}</td>     </tr>     </div>     </div> </table> 

in case i'm using <div> element, doesn't work because <div> doesn't belong <table> that. there find of no-op-element, have use loops this?

i'm not sure if that's possible. maybe can little more creative i. try though:

controller-

var data = {     "keya": ["valuea", "valueb"],     "keyb": ["valuec", "valued"] };  $scope.getpairs = function() {   var ret = [];    for(var key in data) {     for(var = 0; < data[key].length; i++) {       ret.push(key, data[key][i]);     }   }    return ret; } 

html -

<table>   <tr ng-repeat="pair in getpairs() track $index">       <td>{{pair[0]}}</td>       <td>{{pair[1]}}</td>   </tr> </table>