select default option in dropdown dependent in ANGULAR.JS

Question

I have a dependent dropdown I select a country. I need to be marked by default "manizales" if Colombia is selected and "Chicago" is marked if United States is selected (USA). I have tried many things, but do not know how to mark the first time a default option.

<select id="country" ng-model="selectedCountry" ng-options="country.id as country.name for country  in countries track by country.id">
    <option value="">Choose</option>
</select>Departement:
<select id="state" 
ng-model="selectedState" ng-options="state.id as state.dep for state in ((countries | filter:{'id':selectedCountry})[0].states) track by state.id">
    <option value="">Choose</option>
</select>

maybe I did not understand me. I need a country when the first dropdown is loaded appears, for example Colombia, and that once this marked by "manizales" defect

http://plnkr.co/edit/6gvGmfqIqEAyYtYyYIb8?p=preview

Answer 1

One option is to use ng-change on the country input and assign the $scope.selectedState when that changes. I would also recommend adding a defaultStateId property to each country to make this more flexible.

So your country HTML would become:

<select id="country" ng-change="CountrySelected()" ng-model="selectedCountry" ng-options="country.id as country.name for country  in countries track by country.id">
    <option value="">Choose</option>
</select>

And your CountrySelected function would look something like this:

$scope.CountrySelected = function() {
    var countryId = $scope.selectedCountry;
    for (var i = 0; i < $scope.countries.length; ++i) {
        var country = $scope.countries[i];
        if (country.id === countryId) {
            $scope.selectedState = country.defaultStateId;
            break;
        }
    }
};

Answer 2

you just need to add an 'defaultIndex': 0 foreach father element, example here

var Aplic = angular.module("Aplic", []);

Aplic.controller('CountryCntrl', function($scope) {

$scope.countries = [{
    'id': '1',
    'name': "Colombia",
    'defaultIndex': 0,
    'states': [{
        'id': '12',
        'dep': "Manizales"
    }, {
        'id': '11',
        'dep': "Bogota"
    }]
}, {
    'id': '2',
    'name': "USA",
    'defaultIndex': 1,
    'states': [{
        'id': '3',
        'dep': "California"
    }, {
        'id': '15',
        'dep': "Chicago"
    }]
}];

$scope.selectedCountry = $scope.countries[0];

});

Answer 3

You can make the following changes using ng-change . http://plnkr.co/edit/RUxVch?p=preview

<select id="country" ng-model="selectedCountry" ng-options="country as country.name for country  in countries" ng-change='selectedState = selectedCountry.states[0].id;'>
    <option value="">Choose</option>
</select>Departement:
<select id="state" 
ng-model="selectedState" 
ng-options="state.id as state.dep for state in selectedCountry.states">
    <option value="">Choose</option>
</select>

Answer 4

replace ng-model="selectedState"

with below code ng-model="(countries | filter:{'id':selectedCountry})[0].states[0]"

Answer 5

2 things you need to do:

1) add an ng-change to the selectedCountry dropdown that will set the selectedState model to the first state in your list

2) re-arrange the states in your json so that the default state is the first one.

Here is a working example

You could also extend it to add a default value to either the country list or a default boolean to the state object.