JSFiddle - React, Tailwind, and code Playground

HTML

<table ng-app="testApp" ng-controller="testController">
    <tr>
      <td>Contitent</td>
      <td>Country</td>
      <td>Capital</td>
    </tr>
    <tr ng-repeat-start="(key, val) in testData">
        <td rowspan="{{val.length}}">{{key}}</td>
        <td>{{val[0].country}}</td>
        <td>{{val[0].capital}}</td>
    </tr>
    <tr ng-repeat-end ng-repeat="value in val.slice(1)">
        <td>{{value.country}}</td>
        <td>{{value.capital}}</td>
    </tr>
</table>

CSS

table, th, td {
    border: 1px solid black;
}

JavaScript

angular.module('testApp',[])
.controller('testController',function($scope){
    $scope.testData=
        {
    "Africa" : [{
            "country" : "Nigeria",
            "capital" : "Abuja"
        }, {
            "country" : "Kenya",
            "capital" : "Nairobi"
        }, {
            "country" : "Ghana",
            "capital" : "Accra"
        }
    ],
    "Asia" : [{
            "country" : "India",
            "capital" : "New Delhi"
        }, {
            "country" : "China",
            "capital" : "Beijing"
        }
    ],
    "Europe" : [{
            "country" : "France",
            "capital" : "Paris"
        }
    ]
};
});