html - how to get the object inside object in json using angular js -

here json file.

{ "countries":[     {         "country": "india",         "cities" : [{             "name": "bangalore",             "rank": "40"         },         {   "name": "mumbai",             "rank": "32"         },         {   "name": "kolkata",             "rank": "54"         },         {   "name": "chennai",             "rank": "42"         }]     },           {   "country": "china",         "cities":[{"name": "guangzhou",             "rank": "111"         },         {   "name": "fuzhou",             "rank": "21"         },         {   "name": "beijing",             "rank": "90"         },         {   "name": "baotou",             "rank": "23"         }]     } ]} 

i want show name , rank of cities in html table, unable this. angular js code is:

app.controller('cityctrl1', function($scope, $http){ $http.get("http://localhost:8080/angular%20examples/angularcountries/app/json/countriestocities1.json").success(function(data){     $scope.cities  = data.countries; });  

});

html code is:

    <tr ng-repeat="city in cities | filter: selectname1">         <div ng-repeat="details in city.cities">             <td> {{details.name}} </td>             <td> {{details.rank}}</td>         </div>    </tr> 

might change code in controller file getting data, not sure work or not.

first thing div inside tr not allowed(not working also) - check <div> <tr>: correct?

so have change format -

<ul class="table" ng-repeat="country in cities.countries">    <li class="city-row" ng-repeat="city in country.cities">       <span class="city-name">{{city.name}}</span>             <span class="city-count">{{city.rank}}</span>    </li> </ul> 

i have created working example - http://plnkr.co/edit/1gtqnpcfigd9xraay0vg

apply own css display in table format.