After selecting item from dropdown, list is empty when clicked again

[toymachiner62]

Im trying to implement js-custom-select with an async server side call to select user emails. It works great the first time, but when you click the selected email to re-open the dropdown, the list is empty.

How can I make it so the list is populated with emails after clicking the selected email to re-open the dropdown?

<div custom-select="asyncOptions" ng-model="allUsers" ng-options="f as f.email for f in allUsers">
  <div class="pull-left">
    <strong>{{ f.firstName }} {{ f.lastName}}</strong><br />
    <span>{{ f.email }}</span>
  </div>
  <div class="clearfix"></div>
</div>

$scope.asyncOptions = {
    searchDelay: 300,
    displayText: 'Impersonate',
    onSearch: function (term) {

      // No search term: restore original items
      if (!term) {
        getAllUsers();
      } else {
        getUsers(term);
      }
    }
  };

  /**
   * Gets all the users that begin with term
   *
   * @param term  - The email (or part of an email) to search for
   */
  var getUsers = function(email) {
    Users.findByEmailStartingWith({email: email}, function(users) {
        $scope.allUsers = users;
    });
  };

  /**
   * Gets all the users
   */
  var getAllUsers = function() {
    Users.query(function(users) {
        $scope.allUsers = users;
    });
  };

[axel-zarate]

I see a problem with your code. You are assigning allUsers to your ng-model attribute, which is the same as your ng-options variable. My guess is that as soon as you select an item from the dropdown, allUsers is overwritten with your selected value. Try changing your ng-model (to something like ng-model="selectedUser") and see if that fixes the issue.