How to design the following table in Angularjs

Question

I have a JSON as given in the link and i want it to display it in a table. i had various options for that and i can able to bring it successfully in that table i also have an extra column for edit and view buttons. i'm facing my difficulty in the view option. i wanted the the particular selected row should be displayed as below

I tried ngHandsontable but the problem i'm facing is i can't able to populate the values in exact cells as i want in the above merged cells and also each row has different entities in my required table. This is a table and i hope it is possible to make it display in the way i want in angularjs.

Can some one help me to solve this

Thanks in advance

note:

1. I am trying to bring this table below the first table i use ng-show directive for this table so only when the view option clicked it will open on the same page
2. The below table is 16x4 cells table images and chart has a rowspan=4 images has a colspan=2 and chart has a colspan=4

Answer 1

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

I have done with basic functionality. Now 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>