angularjs ui-select set default value and can not select the default value

Question

I follow the example in the angularjs ui-select bootstrap website.

Here is the html part code:

  <div class="form-group">
    <div class="col-sm-6">
      <ui-select ng-model="ctrl.person.selected" theme="bootstrap">
        <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices group-by="'country'" repeat="item in ctrl.people | filter: $select.search">
          <span ng-bind-html="item.name | highlight: $select.search"></span>
          <small ng-bind-html="item.email | highlight: $select.search"></small>
        </ui-select-choices>
      </ui-select>

And here is the js part code:

  $scope.person = {};

$scope.people = [
{ name: 'Adam',      email: 'adam@email.com',      age: 12, country: 'United States' },
{ name: 'Amalie',    email: 'amalie@email.com',    age: 12, country: 'Argentina' },
{ name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
{ name: 'Adrian',    email: 'adrian@email.com',    age: 21, country: 'Ecuador' },
{ name: 'Wladimir',  email: 'wladimir@email.com',  age: 30, country: 'Ecuador' },
{ name: 'Samantha',  email: 'samantha@email.com',  age: 30, country: 'United States' },
{ name: 'Nicole',    email: 'nicole@email.com',    age: 43, country: 'Colombia' },
{ name: 'Natasha',   email: 'natasha@email.com',   age: 54, country: 'Ecuador' },
{ name: 'Michael',   email: 'michael@email.com',   age: 15, country: 'Colombia' },
{ name: 'Nicolás',   email: 'nicolas@email.com',    age: 43, country: 'Colombia' }];

  addoptions();
  function addoptions(){

     var tmp = { name: 'Nis',   email: 'nis@email.com',    age: 43, country: 'China' };
     $scope.people.push(tmp);
     var tmp2 = {name: 'Emma',   email: 'Emma@email.com',    age: 43, country: 'China'};
     $scope.people.push(tmp2);
     $scope.person.selected = $scope.people[0]; 
  }

The dropdown list should be look like the right side, but my just look like the left sie:

Also, I noticed one thing, once I set default person.select, the $$haskkey of $scope.people[0] , does not exist anymore. My version of ui select is 0.17.1.

Answer 1

I had a look at your issue and made a example where I cannot reproduce this issue. Could you check if you are having 0.17.1 or 0.17.2. In 0.17.2 they have made some changes where the selected value default is gone. Here's the example link

 -