dropdowns

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<div ng-app="demoApp" ng-controller="DemoController">
    <select class="country" ng-model="selectedCountry" ng-options="country.name for country in items">
        <option value="">Choose country</option> 
    </select>
    
    <select ng-show="selectedCountry" class="city" ng-model="selectedCity" ng-options="city.name for city in selectedCountry.cities">
        <option value="">Choose city</option> 
    </select>
    
    <p>Selected country : {{selectedCountry.name}}</p>
    <p>Selected city : {{selectedCity.name}}</p>
</div>

JavaScript

var demoApp = angular.module('demoApp', []);

demoApp.controller('DemoController', function ($scope) {

    $scope.items = [
         {
             name:'France',
             cities : [
                  {id:1,name:'Paris'},
                  {id:2,name:'Lyon'},
             ]
         },
         {
             name:'USA',
             cities : [
                  {id:1,name:'San Francisco'},
                  {id:2,name:'New York'},
                  {id:3,name:'New York'}
             ]
         }
    ];
});