title: how to get the object inside object in json using angular js
body: <p>Here is my json file.</p>
  
  <pre><code>{
  "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"
          }]
      }
  ]}
  </code></pre>
  
  <p>I want to show all the name and rank of all the cities in the html table,
  but I am unable to do this.
  <strong>Angular js code is:</strong></p>
  
  <pre><code>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;
  }); 
  </code></pre>
  
  <p>});</p>
  
  <p><strong>Html code is:</strong></p>
  
  <pre><code>    &lt;tr ng-repeat="city in cities | filter: selectName1"&gt;
          &lt;div ng-repeat="details in city.cities"&gt;
              &lt;td&gt; {{details.name}} &lt;/td&gt;
              &lt;td&gt; {{details.rank}}&lt;/td&gt;
          &lt;/div&gt;
     &lt;/tr&gt;
  </code></pre>
  
  <p>Might be I could change the code in controller file for getting the data, but not sure that will work or not. </p>