Setting default item of select box using angularjs


I’m trying to set the default item of a select box on load using angularjs.

I load both select boxes from 2 json’s, so the second select box, named ‘city’ relies off the first select box ‘country’:

<select name="country" ng-model=""
ng-options="c.n for c in countryList"
ng-change="countryChanged()" required></select>

<select name="city" ng-model=""
ng-options="c for c in cityList" required></select>


It loads the select boxes using $http.get. It loads all well and good if i default it to the first option. But lets say, I want to specify a certain option to be selected on load, but I can only send it a particular value from the json, how would I do this? In the code below, the commented line is what I've tried, but all it does is load the correct city list, but leave the country select box unselected.




.success(function (data) {
$scope.countryList = data;
$ = data[0];
// $ = 'fr'; <<<--- *trying to set default*

$scope.countryChanged = function() {

$http.get($ + '-cities.json')
.success(function (data) {
$scope.cityList = data;
$ = data[0];

Also, if there is a better way to achieve this, please post it.

Note: I can’t join the json up. I split it because in the real world, there could be 100 countries each with 100 cities each and the json would be quite massive.

Problem courtesy of: jzm


Not sure, but does this satisfy the requirement?

var selectCountry = function( data, code ) {
for ( var i = 0; i < data.length; i++ ) {
var country = data[ i ];
if ( country.c !== code ) { continue; }
return country

.success(function (data) {
$scope.countryList = data;
$ = selectCountry( data, 'fr');

Solution courtesy of: Tosh

View additional discussion.