First item in dropdown is blank when filtering in ng-options

Question

I'm filtering in my ng-options this is my code in my html

 <select class="form-control" id="selectType" ng-model="user.type" ng-init="user.type= types[0]">
 <option ng-repeat="type in types" value="{{type}}">{{type}}</option>
 </select>

<select class="form-control" ng-model="user.fullname" ng-options="employee as fullName(employee) for employee in employees | filter: user.type">

then in my controller I have this code

$scope.types = ['admin','encoder','checker','cashier']; 

var getEmployees = function () {
    $http.get(httpHost + '/employees').success( function (data) {
      if(data.length !== 0){
        $scope.employees =  $scope.sortData(data,'emp_fname');
        $scope.user.fullname = $scope.employees[0];
        console.log("Employees:");
        console.log($scope.employees);
      }else{
        $scope.noEmployees = true;
      }
    }).error(function (err) {
      console.log(err);
    });
  };

  getEmployees();

it will filter it correctly but leave a blank in the first item in the dropdown my result is like this one http://jsfiddle.net/sheppe/EeL9y/

Where do you get `employees`? How is it populated? What does it look like in a raw form (i.e. what items are in it)? — Mike Perrenoud, May 30 '15 at 13:16
I highly doubt that it has any relation to Angular, AFAIU that's just the behavior of ` — user3707125, May 30 '15 at 14:27

score 1 · Answer 1 · answered May 30 '15 at 15:58

This is due to the behavior of select. If you want to set an initial (non-blank) value, you can do something like this-

<select class="form-control" ng-model="user.fullname"
ng-options="employee as fullName(employee) for employee in employees | filter: user.type">
<option value=''>Text you want to display</option>
</select>

First item in dropdown is blank when filtering in ng-options

1 Answers1