title: Split JSON arrays across multiple select boxes
body: <p>I'm using AngularJS in parts of my website, not for the whole thing. I have a couple of select boxes with one that is dependent on the other. One contains a list of countries, and the other contains cities for the selected country.</p>
  
  <p>In the past, I would split my json into 2 queries to the server, so on country changed, it'll send the selected value, and the server would return a json list accordingly which will be inserted into the select box using jquery. This time, and using <a href="http://builtwith.angularjs.org/" rel="nofollow noreferrer">http://builtwith.angularjs.org/</a> as sort of a guideline, I decided to return everything as one json, and handle this functionality purely in javascript. </p>
  
  <p>So lets say, my <strong>json</strong> looks like this:</p>
  
  <pre><code>[
    { "code": 1, "country": "Germany", "cities": [ "Berlin", "Munich" ] },
    { "code": 2, "country": "Italy", "cities": [ "Rome", "Venice" ] },
    { "code": 3, "country": "United Kingdom", "cities": [ "London", "Manchester" ]}
  ]
  </code></pre>
  
  <p>I would need all the values of country as one list for country select box, and the list of each cities for the other select box.</p>
  
  <p>Here's the <strong>controller</strong> so far:</p>
  
  <pre><code>angular.module('myApp', [])
      .controller('MyController', ['$scope', '$http', function ($scope, $http) {
  
  
          $http.get('/api/locations')
              .success(function (data, status, header, config) {
  
                  $scope.locations = data[0];
                  $scope.countryList = [];
                  $scope.cityList = [];
  
                  for (var i = 0; i &lt; data.length; i++) {
                      $scope.countryList.push([data[i].code, data[i].country]);
                      for (var j = 0; j &lt; data[i].cities.length; j++) {
                          $scope.cityList.push([data[i].code + '-' + data[i].cities[j], data[i].cities[j]]);
                      }
                  }
              });
      }]);
  </code></pre>
  
  <p>My select boxes:</p>
  
  <p><strong>Country</strong>:</p>
  
  <pre><code>&lt;select ng-model="country" data-ng-options="c for c in countryList"&gt;&lt;/select&gt;
  </code></pre>
  
  <p><strong>City</strong>:</p>
  
  <pre><code>&lt;select data-ng-model="city" data-ng-options="c for c in cityList"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>Currently, both select boxes get filled, but their text contains both values of the array. The cities box contains ALL cities, not just the ones for the first country.</p>
  
  <p>I'm not sure if i'm on the right path here, or if there's an easier way to achieve this.</p>
  
  <p>So sum up, I'd like to know:</p>
  
  <ol>
  <li>Should i keep the whole json as one request/response and handle
  it in JS?</li>
  <li>How do you load each select box the 'official' angularjs way?</li>
  <li>I'm aware of the ng-change attribute on the select box, but I'm
  not sure how I'd create a query and change the city list values
  according to the selected country.</li>
  </ol>
  
  <p>Here is a <strong>plunk</strong>: <a href="http://plnkr.co/edit/zAcRjSDm9OndxugtsAOs?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/zAcRjSDm9OndxugtsAOs?p=preview</a></p>