angularjs - How to generate an HTML table from the following Hierachical Json? -

i have got json this, can find complete json in plunker

"name": "total",             "imageurl": "",             "type": "total",             "children": [                 {                     "name": "motor car",                     "imageurl": "",                     "type": "motor car",                     "children": [                         {                             "name": "private",                             "imageurl": "",                             "type": "private",                             "size": 9221                         },                         {                             "imageurl": "",                             "type": "hiring",                             "name": "hiring",                             "size": 1058                         },                         {                             "imageurl": "",                             "type": "rent",                             "name": "rent",                             "size": 114                         }                     ],                     "size": 10393                 },                 {                     "name": "combine harvester",                     "imageurl": "",                     "type": "combine harvester",                     "children": [                         {                             "imageurl": "",                             "type": "agricultural usage",                             "name": "agricultural usage",                             "size": 1                         }                     ],                     "size": 1                 }       } 

from above need generate table follows, how can that? here code have tried far:

   <table>         <tr ng-repeat='(key,val) in arr'>             <td>                 {{key}}              </td>             <td ng-repeat='(nestedkey,nestedval) in val'>                   {{nestedval}}             </td>         </tr>     </table> 

expected output:

corrected :

<tr ng-repeat='(key,val) in arr.children'>             <td>                 {{key}}              </td>             <td>                 {{val.name}}              </td>            <td>               <div ng-repeat='(nestedkey,nestedval) in val.children'>                {{nestedval.name}}                </div>             <td>                 {{val.size}}              </td>          </tr> 

http://plnkr.co/edit/h4wxf7xs5dk1kdquyxlv?p=preview