javascript - How to design the following table in Angularjs -

i have json given in link , want display in table. had various options , can able bring in table have column edit , view buttons. i'm facing difficulty in view option. wanted the particular selected row should displayed below

i tried nghandsontable problem i'm facing can't able populate values in exact cells want in above merged cells , each row has different entities in required table. table , hope possible make display in way want in angularjs.

can 1 me solve

thanks in advance

note:

1. i trying bring table below first table use ng-show directive table when view option clicked open on same page
2. the below table 16x4 cells table images , chart has rowspan=4 images has colspan=2 , chart has colspan=4

example: http://jsfiddle.net/kevalbhatt18/sjpyffd8/1/

i have done basic functionality. apply css on table

  
<div ng-controller="myctrl">     <div ng-repeat="line in parent">         <div class="header">{{line.name}}</div>         <table>             <tr>                 <td ng-repeat="satellites in line.satellites">{{satellites.name}}                     <div>{{satellites.image}}</div>                 </td>             </tr>             <tr>                 <td ng-repeat="continents in line.continents">{{continents.name}}                     <div>{{continents.image}}</div>                 </td>                 <tr/>         </table>              <div class="header">population</div>                 <div>{{line.population.graph}}</div>         </div> </div>