Multiply dropdown angularjs

Question

on my web app, i need to have multiply dropdown box. All data is from json from my api. Ok, the my problem is, i know how to set data from api, but here i have 3 different url, one with country, second with states and third with city. Dropdown depending on selected country. on first drop down i need to select county (url: blabla/countries), then in second dropdown i need to set states for selected country (url: blabla/countries/countryId/states) and in third dropdown i need select city only for selected states (url: blabla/countries/countryId/states/statesId/city). I don't know how to add id from selected country or states to url for next dropdown box.

 $http.get('url')
                .success(function(response)
        {$scope.countryes=response;});
    

  <div>
        Country: 
        <select id="country" ng-model="country" ng-options="country.id as country.name for country in countryes">
          <option value=''>{{countryes.name}}</option>
        </select>
    </div>
    <div>
        States <select id="city" ng-disabled="!country" ng-model="suburbs" ng-options="state as state.name for state in states"><option value='state'>Select</option></select>
    </div>
    <div>
        City <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>        
    </div>

Thnx to everyone

Answer 1

use ng-change for county and state select

   <div>
  Country:
  <select id="country" ng-model="country" ng-options="country.id as country.name for country in countryes" ng-change='getState()'>
    <option value=''>{{countryes.name}}</option>
  </select>
</div>
<div>
  States
  <select id="city" ng-disabled="!country" ng-model="suburbs" ng-options="state as state.name for state in states"  ng-change='getCity()'>
    <option value='state'>Select</option>
  </select>
</div>
<div>

in controller ad new functions

$scope.getState = function(){
    //this function run when you select country
     $http.get('getStateUrl',{country: $scope.country})

}


$scope.getCity= function(){
     //this function run when you select state
     $http.get('getCityUrl',{state: $scope.suburbs})
} 

Answer 2

first thnx to @aseferov for help. If someone in future will have same questions this is my code, how i do this. This is my CTRL (i have three different drop down depending on ID from drop down before)

app.controller('myCtrl', ['$scope', '$routeParams', 'narudzbaResourceFactory', 'narudzbaResourceStatesFactory', 'narudzbaResourceStatesCityFactory',
function ($scope, routeParams, narudzbaResourceFactory, narudzbaResourceStatesFactory, narudzbaResourceStatesCityFactory) {

    narudzbaResourceFactory.query(function (res) {
        $scope.countries = res;
    });
    $scope.getState = function () {

        $scope.states = narudzbaResourceStatesFactory.query({country: $scope.country.id});

    };

    $scope.getCity = function () {
        $scope.cities = narudzbaResourceStatesCityFactory.query({state: $scope.state.id});

    };

And this is my factory

app.factory('narudzbaResourceFactory', ['$resource',
function ($resource) {
    var countries = $resource('/locationlist/countries', {
        query: {method: 'GET', isArray: true
        }
    });
    return countries;
}]);

app.factory('narudzbaResourceStatesFactory', ['$resource',
function ($resource) {
    var states = $resource('locationlist/countries/:country/states',  {country: '@country'}, {
        query: {method: 'GET', isArray: true
        }
    });
    return states;
}]);

app.factory('narudzbaResourceStatesCityFactory', ['$resource',
function ($resource) {
    var cities = $resource('/locationlist/states/:state/cities',
            {state: '@state'}, {
        query: {method: 'GET', isArray: true
        }
    });
    return cities;
}]);

And in the view i use it like this

  <div>
    Country: 
    <select id="country" ng-model="country" ng-options="country as country.name for country in countries track by country.id" ng-change="getState()">
        <option value='{{country.id}}'>{{country.name}}</option>
    </select>
</div>
<div>
    States <select id="state" ng-disabled="!country" ng-model="state" ng-options="state as state.name for state in states track by state.id" ng-change="getCity()">
        <option value='{{state.id}}'>{{state.name}}</option>
    </select>
</div>
<div>
    City <select id="city" ng-disabled="!state" ng-model="city" ng-options="city as city.name for city in cities track by city.id">
        <option value='{{city.id}}'>{{city.name}}</option></select>        
</div>