JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<script src="//vk.com/js/api/openapi.js"></script>
<body ng-app="demoApp">
    <div ng-controller="DemoController">
        <label for="country">Страна:{{countries.length}}</label>
        <select name="country" class="form-control"
            ng-model="selectedCountry" 
            ng-change="onCountrySelected()"
            ng-options="country.title for country in countries">
	        <option value="">--Выбрать страну--</option>
        </select>
        
        <button ng-click="addCountry()">Добавить в список</button>
        
        <br /><br />{{countries}}
        <br /><br />Выбрали страну, ID: {{selectedCountry.value}}
    </div>
</body>

JavaScript

// https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()
angular.module('demoApp', []).controller('DemoController', function($scope) {

    $scope.countries = [
        {title: "Russia", value: 0}
	];
    $scope.selectedCountry = $scope.countries[0];
    
    $scope.addCountry = function () {
        $scope.countries.push(
            {title: 'Country ' + $scope.countries.length, value: $scope.countries.length}
        );
    };
    
    $scope.onCountrySelected = function() {
        console.log('Выбрали страну ID' + $scope.selectedCountry.value + ', загружаем город');
        // вызываем api городов
    };
    
    setTimeout(function () { 
        $scope.$apply($scope.addCountry);
        console.log('Add one');
    }, 1000);
    
    // не добавится без $apply
    setTimeout(function () { 
        $scope.addCountry();
        console.log('Add two');
    }, 2000);
});