<div ng-controller="AjaxCtrl">

      <h1>AJAX - Oriented</h1>

    <div>

        Country:

        <select id="country" ng-model="country" ng-options="country for country in countries">

          <option value=''>Select</option>

        </select>

    </div>

    <div>

        City: <select id="city" ng-disabled="!cities" ng-model="city" ng-options="city for city in cities"><option value=''>Select</option></select>

    </div>

    <div>

        Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>

    </div>

</div>

  <div ng-controller="StaticCtrl">

      <h1>Static - Oriented</h1>

      <p>This approach may be better when you have the entire dataset</p>

    <div>

        Country:

        <select id="country" ng-model="cities" ng-options="country for (country, cities) in countries">

          <option value=''>Select</option>

        </select>

    </div>

    <div>

        City: <select id="city" ng-disabled="!cities" ng-model="suburbs" ng-options="city for (city, suburbs) in cities"><option value=''>Select</option></select>

    </div>

    <div>

        Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>

    </div>

  </div>

function AjaxCtrl($scope) {

    $scope.countries = ['usa', 'canada', 'mexico', 'france'];

    $scope.$watch('country', function(newVal) {

        if (newVal) $scope.cities = ['Los Angeles', 'San Francisco'];

    });

    $scope.$watch('city', function(newVal) {

        if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];

    });

}

function StaticCtrl($scope) {

    $scope.countries = {

        'usa': {

            'San Francisco': ['SOMA', 'Richmond', 'Sunset'],

            'Los Angeles': ['Burbank', 'Hollywood']

        },

        'canada': {

            'People dont live here': ['igloo', 'cave']

        }

    };

}