Angular, select the first list item blank

Question

I populate my selection list like this:

<select class="selectLevel0" ng-model='scope1' ng-change='scope1Change()' 
            ng-options='obj.name for obj in array track by obj.id'>
</select>

Here is $ http behind it:

   //populate  scopes
    $http.post("/listScopes").success(function(data){
        $scope.array = data.scopes;
    });

What happens - I get the first select element that has no name and value = "?" (the rest fill the fine). I can’t understand why he is doing this. Any help is appreciated. Thank!

Answer 1

The reason is because, since your ngModel is most likely not assigned or not assigned properly with an identifier, angular creates an empty option and displays it as the selected one.

You can either add a default parameter: -

<select class="selectLevel0" ng-model='scope1' ng-change='scope1Change()' 
            ng-options='obj.name for obj in array track by obj.id'>
 <option value="">Please choose a level</option>
</select>

ngModel ng-init. : -

 $scope.scope1 = "id"

Answer 2

, scope1 undefined, , ng-init .

Answer 3

Angular creates an empty first selection by default to avoid accidentally selecting an option. To remove this, set scope1 = obj.namewhere obj.name is the name of the first element in your array.