Angular table with td.rowspan

by klode

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<table class="table">
  <thead>
    <tr>
        <th>Continent</th>
        <th>Country</th>
        <th>Capital</th>
    </tr>
  </thead>
 <tbody>
  <tr ng-repeat-start="(continent, countries) in response" ng-if="false"> </tr>
  <tr ng-repeat-start="country in countries track by $index" ng-if="false"></tr>
      <tr>
        <td ng-if="$index==0" rowspan="{{countries.length}}">{{continent}}</td>
        <td>{{country.country}}</td>
        <td>{{country.capital}}</td>
      </tr>
      <tr ng-repeat-end ng-if="false"></tr>
 <tr ng-repeat-end ng-if="false"></tr>
</tbody>
</table>
</div>
</div>

CSS

table {
  border: 1px solid #666;   
  width: 100%;
}
td {
  border: 1px solid #666;  
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
  padding: 2px;
}

JavaScript

var mockData;

angular.module('myApp', [])
.controller("MainCtrl", MainCtrl);

function MainCtrl($scope, $http) {

    $scope.response = {};
    $scope.vm = {};
    loadData();
    
   function loadData() {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data: mockData

        }).success(function(data, status) {
            $scope.response = data;
        });

    };

}

mockData = "json=" + encodeURI(JSON.stringify({
    "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"
        }
    ]
}));