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'}]
    };

    function getRegions(countryCode) {
        var deferred = $q.defer();
        console.log('getRegions: ' + countryCode);
        setTimeout(function() {
            $scope.$apply(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) {
                    $scope.regions = result;
                });
            }
            else {
                $scope.regions = [];
            }
        });
    }