How to make first option selected in chosen select

Question

I have chosen select, and my options gets by ng-model and ng-options. How I can make 1-st option selected when page is loaded?

<select chosen data-placeholder="Choose a project..."
    ng-model="workflow.ProjectID" 
    ng-model-options="{ updateOn: 'blur' }" 
    ng-change="addActionButtons()"
    ng-options="item.Id as item.Name for item in projectList">
    <option value=""></option>
</select>

This is controller:

$scope.bindModel = function(data) {
    $scope.model = data;
    $scope.projectList = Global.projectList;
    $scope.Task.push($scope.newTask());
};

$scope.Task = [];

$scope.newTask = function() {
    return {                        
        ProjectId: $scope.workflow.ProjectID = $scope.projectList[0].Id,
        Date: getDate(),
        TaskDescription: '',
        TimeWorked: '1',
        Note: '',
        isSaved: false
   };

};

Duplicate of http://stackoverflow.com/questions/18194255/how-to-have-a-default-option-in-select-box-angular-js — Kushal, Aug 20 '15 at 12:04

score 2 · Accepted Answer · answered Aug 20 '15 at 12:03

2

You can use ng-init

Use

ng-init="workflow.ProjectID = projectList[0]['Id']"

answered Aug 20 '15 at 12:03

sahil gupta

2,339
12
14

@HUSTLIN: Welcome!! :-) – sahil gupta Aug 20 '15 at 12:10

Pierre-Alexandre Moller · Answer 2 · 2015-08-20T12:06:22.883

0

On your controller, you have to put something like this :

//If workflow is never use in your controller, you have to declare it before
$scope.workflow = {}; 
$scope.workflow.ProjectID = $scope.projectList[0].Id;

edited Aug 20 '15 at 12:06

answered Aug 20 '15 at 12:02

Pierre-Alexandre Moller

2,354
1
20
29

I have an error: Cannot set property 'ProjectID' of undefined. I added my ctrl code to question – HUSTLIN Aug 20 '15 at 12:04
@HUSTLIN It's because you use it only on your `ng-model` and worflow wans't declare. Edit done. – Pierre-Alexandre Moller Aug 20 '15 at 12:07

score 0 · Answer 3 · answered Aug 20 '15 at 12:11

You can try something like this :

 //init list select
$scope.values = [{ id: 1, label: '1' }, { id: 2, label: '2' }, { id: 3, label: '3' }, { id: 10, label: '10' }, { id: 20, label: '20' }];
// in your html ng-init select the first items in values 
<select ng-options="item.label for item in values track by item.id" ng-model="selected"  ng-change="changeNumPerPage(selected)" ng-init="selected = values[0]"></select>

How to make first option selected in chosen select

3 Answers3