Пустой элемент всегда отображается в теге select при привязке к таблице базы данных

Question

По некоторым причинам у меня есть странная проблема в моем представлении ASP.Net MVC/angularjs. Я перечисляю пользователей в скрытом теге select. Как только я нажимаю список, чтобы показать тег select, я вижу пользователей, но всегда есть пустой элемент в начале списка?! Что делает его более странным, этот пустой элемент исчезает, как только я выбираю любые другие (не пустые) элементы.

Вид:

<select ng-options='x as (x.fName+" "+x.lName) for x in users' ng-model="uListModel"></select> 

AngularJS:

$http.get('/Home/GetUsers') 
    .then(function (response) { 
     $scope.users= response.data; 
    }) 
    .catch(function (e) { 
     console.log("error", e); 
     throw e; 
    }) 
    .finally(function() { 
     console.log("This finally block"); 
    }); 

MVC контроллер:

public JsonResult GetSupervisor() 
{ 
    return this.Json((from userObj in db.Users 
         select new 
         { 
         Id = userObj.Id, 
         fName = userObj.usrFirstName, 
         lName = userObj.usrLastName,         
         }) 
         , JsonRequestBehavior.AllowGet 
        ); 
} 

Answer 1

Пожалуйста, попробуйте один из этих двух решений:

Решение 1:

<select ng-options='x as (x.fName+" "+x.lName) for x in users' ng-model="uListModel"> 
     <option value="" selected="selected">Select User</option> 
</select> 

Решение 2:

Установить начальное значение Модель:

$http.get('/Home/GetUsers') 
    .then(function (response) { 
     $scope.users= response.data; 
     $scope.uListModel = $scope.users[0] 
    }) 
    .catch(function (e) { 
     console.log("error", e); 
     throw e; 
    }) 
    .finally(function() { 
     console.log("This finally block"); 
    }); 

Или:

<select ng-init="uListModel=users[0]" 
ng-options='x as (x.fName+" "+x.lName) for x in users' ng-model="uListModel"></select>