JSFiddle - React, Tailwind, and code Playground

HTML

<div ng:app>
<div ng:controller="addressValidationController">
    Country Code<select ng:model="countryCode"><option value="US">United States</option><option value="CA">Canada</option></select>
    Region Code <select ng:model="regionCode" ng:options="r.code as r.name for r in regions"/>
</div>
</div>

JavaScript

function addressValidationController($scope, $q) {
    var regions = {
        US: [{
            code: 'WI',
            name: 'Wisconsin'},
        {
            code: 'MN',
            name: 'Minnesota'}],
        CA: [{
            code: 'ON',
            name: 'Ontario'}]
    };

    //$scope.countryCode = 'US';

    function getRegions(countryCode) {
        var deferred = $q.defer();
        console.log('getRegions: ' + countryCode);
        setTimeout(function() {
            var countryRegions = regions[countryCode];
            if (countryRegions === undefined) {
                console.log('resolve empty');
                deferred.resolve([]);
            } else {
                console.log('resolve');
                deferred.resolve(countryRegions);
            }
        }, 1000);
        return deferred.promise;
    };

    $scope.regions = [];

    // Manage country changes:
    $scope.$watch('countryCode', function(countryCode) {
        // blank them out temporarily
        $scope.regions = [];

        if (countryCode !== undefined) {
            var promise = getRegions(countryCode);            
            promise.then(function(result) {
                console.log('promise fulfilled:');
                console.log(result);
                $scope.regions = result;
            });
        }
    });
}