set value to select model

Question

I'm looking to do the following, load a form with inputs and selectors with pre-loaded, data sent from the controller. In some cases these work but not in others, especially in the selectors. I have a selector called Country, city and category. These 3 options selectors are loaded by the call to my server works.

$scope.categorias = {};
$scope.ciudades = {};
$scope.paises = {};

$http({ method: 'GET', url: UrlCategorias.url, dataType: "json", contentType: "application/x-www-form-urlencoded" })
    .success(function(data) {
        $scope.categorias = data.GetCategoriasResult;
    })
    .error(function(response) {
        console.log("Error inesperado");
    })
    .finally(function() {

    });
$http({ method: 'GET', url: UrlCiudades.url, dataType: "json", contentType: "application/x-www-form-urlencoded" })
    .success(function(data) {
        $scope.ciudades = data.GetCiudadesResult;
    })
    .error(function(response) {
        console.log("Error inesperado");
    })
    .finally(function() {

    });
$http({ method: 'GET', url: UrlPaises.url, dataType: "json", contentType: "application/x-www-form-urlencoded" })
    .success(function(data) {
        $scope.paises = data.GetPaisesResult;
    })
    .error(function(response) {
        console.log("Error inesperado");
    })
    .finally(function() {

    });

Html

<label class="item item-input item-select">
                <div class="input-label">
                    Pais
                </div>
                <select name="selectPais" id="selectPais" ng-model="data.defaultPais" ng-options="pais.paisCodigo as pais.paisNombre for pais in paises track by pais.paisCodigo" ng-change="updateTheOtherDropdown(data.defaultPais)">
                    <option value="">Seleccione país</option>
                </select>
            </label>
            <label class="item item-input item-select">
                <div class="input-label">
                    Ciudad
                </div>
                <select name="selectCiudad" id="selectCiudad" ng-disabled="!data.defaultPais" ng-model="data.defaultCiudad" ng-options="ciudad.ciuId as ciudad.ciuNombre for ciudad in ciudades_filter ">
                    <option value="">Seleccione ciudad</option>
                </select>
            </label>
            <label class="item item-input item-select">
                <div class="input-label">
                    Categoria
                </div>
                <select name="selectCategoria" id="selectCategoria" ng-model="data.defaultCategoria" ng-options="categoria.catNombre for categoria in categorias track by categoria.catCodigo">
                    <option value="">Seleccione categoría</option>
                </select>
            </label>

The idea in the first two selectors is to choose Country and then load selector cities. This works well.

From the controller I am sending you the following:

$scope.data.defaultPais: sessionService.get('user_paisCodigo'),
$scope.data.defaultCiudad : sessionService.get('user_ciudadId'),
$scope.data.defaultCategoria : sessionService.get('user_categoriaCod')

These values come, but not displayed in the selector

<select name="selectPais" id="selectPais" ng-model="data.defaultPais" ng-options="pais.paisCodigo as pais.paisNombre for pais in paises track by pais.paisCodigo" ng-change="updateTheOtherDropdown(data.defaultPais)" class="ng-pristine ng-valid ng-not-empty ng-touched" style="">
<option value="" selected="selected">Seleccione país</option>
<option label="Argentina" value="AR">Argentina</option>
<option label="Chile" value="CL">Chile</option>
<option label="Uruguay" value="UY">Uruguay</option></select>

This is already loaded in the HTML code selector and I sent him VALUE is, in this case CL, UY or AR.

Answer 1

if paises is getting set asynchronously or after some action (like selecting a different country), you will need to set $scope.data.defaultPais: sessionService.get('user_paisCodigo') after paises is loaded.

If you set defaultPais before paises is loaded, the <select name="selectPais" ... will assign an empty value to its ng-model, because the value you try to set at initialization is not in the list of ng-options yet.

So something like:

$http({ method: 'GET', url: UrlPaises.url, dataType: "json", contentType: "application/x-www-form-urlencoded" })
    .success(function(data) {
        $scope.paises = data.GetPaisesResult;
        $scope.data.defaultPais = sessionService.get('user_paisCodigo');
    })
    .error(function(response) {
        console.log("Error inesperado");
    })
    .finally(function() {

    });