ng-init not setting first select options in ng-options

Question

I have a simple select element and I am trying to initialize the value but for some reason it is failing, ie not taking the init value

HTML

<select class="select-form-control"
    ng-model="lossGainProb"
    ng-options="item.display for item in possibility track by item.value" 
    ng-init="EventDetails.lossGainProb">

JavaScript

$scope.possibility = [{
    display: '0%',
    value: 0
}, {
    display: '5%',
    value: 5
}];

$scope.EventDetails.lossGainProb = 5;

Answer 1

Based on the given code I have created small working demo here

<div ng-app="myApp" ng-controller="myCtrl">    
<select class="select-form-control" ng-model="lossGainProb" 
  ng-options="item.value as item.display for item in possibility">
</select>
</div>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
       $scope.possibility =[ {
            display : '0%',
            value : 0
        }, {
            display : '5%',
            value : 5
        }];

    $scope.lossGainProb = $scope.possibility[1].value;

});

Answer 2

This will work without using ng-init - initializing in the controller:

$scope.lossGainProb = {};
$scope.lossGainProb.value = 5; 

ng-init should not be used if possible - https://docs.angularjs.org/api/ng/directive/ngInit .

Answer 3

You need the tracked item for the list tracked by angular. Try this:

$scope.possibility = [{
    display: '0%',
    value: 0
}, {
    display: '5%',
    value: 5
}];

$scope.EventDetails.lossGainProb = $scope.possibility.filter(function(item){ return item.value === 5})[0];

Working Codepen http://codepen.io/gpincheiraa/pen/bpbMom

Answer 4

There are two mistakes I see:

1. You are using ngInit incorrectly. It does not specify the initial binding for the ngModel directive, it is an expression which is evaluated against the scope after the scope is initialized. To specify initial model bindings, you need something like

    <select ng-init="lossGainProb = EventDetails.lossGainProb"></select> 

   Another (better) approach is to specify this in your controller directly, like

    $scope.lossGainProb = $scope.EventDetails.lossGainProb; 

2. Your ngModel is bound to the entire "possibility" object rather than just the value property. I am assuming that you want just the value to be your model value. In this case, you should set ngOptions like

    <select ng-options="item.value as item.display for item in possibility"></select> 

   This specifies that ngModel should be bound to item.value with item.display being used as the label.

Putting these together, your select should look like

<select class="select-form-control"
    ng-model="lossGainProb"
    ng-options="item.value as item.display for item in possibility"
    ng-init="lossGainProb = EventDetails.lossGainProb">
</select>

Here is a working Plunker.

Answer 5

一种替代方法是：

<select class="select-form-control" ng-init="lossGainProb = possibility[1].value" ng-model="lossGainProb" ng-options="item.value as item.display for item in possibility"> </select>