Why does Angular add an empty <option> if the value exist in the provided options?

Question

I have read on many occasions that Angular tends to add an empty option at the beginning of the select element if the value of the model does not exist among the offered options.

However, I have a model whose value is set to 0 from the start, and 0 is provided as one of the options in the select element as well, yet there is still one empty option above my own options. It disappears after the actual option whose value is 0 gets selected.

Why is this and how do I get rid of it?

A very simple example of the problem I am experiencing is displayed here: http://jsfiddle.net/yuvnz7wr/

The javascript code:

var app = angular.module('Module', []);
app.controller('Test', function ($scope) {
    $scope.model = 0;
    $scope.options = [{
        id: 0,
        name: 'Zero'
    }, {
        id: 1,
        name: 'One'
    }];
});

The HTML code:

<div ng-app="Module">
    <div ng-controller="Test as test">{{model}}
        <select ng-model="model">
            <option ng-repeat="option in options" ng-value="option.id">{{option.name}}</option>
        </select>
    </div>
</div>

Answer 1

You better use ng-options and ng-init directives for <select> with angular:

<div ng-app="Module">
    <div ng-controller="Test as test">{{model}}
        <select ng-model="model" ng-init="model = options[0].id" ng-options="option.id as option.name for option in options"></select>
    </div>
</div>