javascript - Access json data from angularjs -

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"         }]     } ]} 

this angularjs code:

    $scope.countrytype = [         { type: 'india', data:$scope.india, displayname:'india' },          { type: 'china', data:$scope.china, displayname:'china'},          { type: 'ethiopia', data:$scope.ethiopia, displayname:'ethiopia'},          { type: 'cuba', data:$scope.cuba, displayname:'cuba'} ]; 

this angularjs code fine me don't know how access name , rank data of countrytype , want filter according country.

for html page using code :

<select ng-model="country.city" ng-options="country country.type country in countrytype | orderby: 'type'">         <option value=""> - select country - </option>     </select>  <ul ng-repeat = "city in countrytype | filter : country.city.data.cities.country  ">     <li ng-repeat="details in city.data.cities">         <span> {{details.name}} </span>         <span> {{details.rank}}</span>     </li> </ul> 

shall have use different code in html accessing data? data coming not able filter it.

so, have 2 level of arrays in data structure. , why need loop inside country loop access cities.

a bit of change in data structure, , here in example reference:

html:

<div class="container">     <div ng-controller="formcontroller formctrl">         <table>             <tbody ng-repeat="country in formctrl.contrytype">                 <tr>                     <th colspan="2">{{country.country}}</th>                 </tr>                 <tr ng-repeat="city in country.cities">                     <td>{{city.name}}</td>                     <td>{{city.rank}}</td>                 </tr>             </tbody>         </table>     </div> </div> 

javascript:

var app = angular.module("myapp", []);  app.controller("formcontroller", function () {     var ctrl = this;      ctrl.contrytype = [{             "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"                 }             ]         }     ]; });  angular.bootstrap(document, ['myapp']); 

working fiddle: http://jsfiddle.net/ashishanexpert/zvcx5z38/5/