Blank select option pointing to next option in Angularjs

Question

I am currently working on Angularjs (version < 1.4). While using ng-repeat in select-option I am getting an extra blank option which is a normal in Angularjs, but when I select this blank option then this automatically picks up the next available option. My scenario have multiple select-option with disable functionality to disable previously selected option so that same option can't be selected in next duplicate select option. Consider the below code :

<div class='col-sm-6' ng-repeat="orderTask in orderList">
    <div class="form-group d-flex" id="task_div">
        <label for="NamesList" class="control-label">
            <span class="ng-binding px-2">Task {{$index + 1}}:</span>
        </label>
        <select class="form-control" name="tasksList"
            id="tasksList" ng-model="orderTask.name"
            ng-change="onTaskValueChange(orderTask.name, $index)"
            style="width:80%">
            <option value="" disabled selected>Select an option</option>
            <option ng-repeat="task in allTasks" ng-value="task.name" ng-disabled="taskIsDisabled(task.name)"
                ng-selected="task.name === orderTask.name">
                {{ task.name }}
            </option>
        </select>
    </div>
</div>

I need to either prevent the blank option from being show or the selection of next available option when I click blank option(no option should be selected upon clicking blank option). How to do this ?

Answer 1

The issue was occurring because of the usage of ng-value="task.name". To solve the issue, I used value="{{task.name}}" instead.

<option ng-repeat="task in allTasks" value="{{task.name}}" ng-disabled="taskIsDisabled(task.name)" ng-selected="task.name === orderTask.name">