How to select multiple options when preparing a multiple select list in AngularJS

Question

I have the following select list:

<select multiple="multiple" ng-model="userRoles" ng-options="r.id as r.name for r in roles"></select>

The above produces a list of all the available roles. I need to preselect the roles that the user is a member of when presenting the form. I can assign a role to userRoles, but if I try create an array and push the roles associated with the user into that array, none of the items are selected.

I've created a jsBin to let you play with the non-working solution (and hopefully fix it): http://jsbin.com/icoSoj/1/edit?html,js,output

Thanks!

Answer 1

Your selected values are IDs and not full objects.

As you do r.id as r.name, you need to put IDs into your array and not the full objects.

http://jsbin.com/uFiDuxa/1/edit

Answer 2

Inside ng-options you are specifying ids as values for the options. So you should do:

$scope.userRoles = [
    $scope.roles[1].id,
    $scope.roles[2].id
];