Angularjs Add strange option into select

Question

Hello I have the same issue

Select Issue

i have strange option like this

<option value="? string:98 ?"></option>

Html Code

 <select  ng-model="vm.student" class="form-control">
   <option value="0">All</option>
   <option data-ng-repeat="src in vm.studentList" value="{{ src.Id }}"> {{ 
   src.Value }} </option>
</select>

and the default value go in the bottom doesn't appear I am trying many ways to fix this problem but unfortunately, no way work well

I hope to help me to fix this issue

thanks

Answer 1

Use the ng-value directive:

<select ng-model="vm.student" class="form-control">
   <option ng-value="0">All</option>
   <option data-ng-repeat="src in vm.studentList" ng-value="src.Id">
     {{src.Value}}
   </option>
</select>

For more information,

• AngularJS API Reference - Using ngValue to bind the model to an array of objects
• AngularJS API Reference - Using ngRepeat to generate select options

Answer 2

It can be solved using ng-options

By referring to Madhan Varadhodiyil example

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="AppCtrl">
       <select  ng-model="student" class="form-control" ng-options="src.Id as src.Value for src in studentList">
         <option value="">All</option>   <!-- value="" helps to remove void space from dropdown -->
       </select>                
    </div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope){
    $scope.studentList = [
        {
            "Id": 98,
            "Value": "Jon Snow"
        },
        {
            "Id": 99,
            "Value": "Mother of dragons"
        }
    ];
    
   $scope.student = $scope.studentList[0].Id; // I want Id:98 to be selected by default
});</script>

Hope it helps, Cheers!