Selecting default option from angular select list

Question

I need to select the following month from a select list. I can get the correct value but can't select the option from the list.

Can anyone see what I'm doing wrong here? I tried a few things from this related question but didn't get anywhere.

This is object that I'm trying to use as the default selected option:

Object { title="November", value="11", sortOrder=11}

Here is my html:

<div class="search-box__select half">
    <select data-ng-model="search.Month" data-ng-disabled="!months" data-ng-options="month.value as month.title for month in months">
        <option value="">-- Select Month --</option>
    </select>
    {{selectedOption}}
</div>

here is my angularjs code:

$scope.getMonths = function(){
    var year = $scope.search.Year;
    if(year)
    {
        $http({
        method:'GET',
        url:'/autocomplete/generatesearchmonths',
        params: { year: year }
    }).success(function(data, status, headers, config){
        $scope.months = data;
        var d = new Date();
        var n = d.getMonth();
        $scope.selectedOption = $scope.months[n].value;
        console.log($scope.selectedOption)
    }).error(function(data, status, headers, config){
        $scope.message='Error loading months'
    })
  }else{
         $scope.months = null;
  }
}

score 1 · Accepted Answer · answered Nov 13 '14 at 13:00

1

You should do the following in the success callback:

$scope.months = data;
$scope.search.Month = $scope.months[0] (or whatever default option should be)

answered Nov 13 '14 at 13:00

Michael

3,308
5
24
36

score 1 · Answer 2 · answered Nov 13 '14 at 13:10

Two options, you can either do what Michael Zucchetta suggested or modify your ng-options:

<select data-ng-model="search.Month" data-ng-disabled="!months" data-ng-options="month.value for month.value as month.title for month in months">
    <option value="">-- Select Month --</option>
</select>

Selecting default option from angular select list

2 Answers2