Angular multiselect menu with arbitrary bindings

Question

How can I bind a select menu to a bunch of arbitrary options in a select menu.

I tied this:

<select multiple class="form-control">
    <option ng-model="some.prop">Average</option>
    <option ng-model="foo.bar.baz">Minimum</option>
    <option ng-model="another">Maximum</option>
</select>

But it doesn't work, using ng-selected works, but only 1 way (i.e. doesn't change the variable when selecting/unselecting an option.

<select multiple class="form-control">
    <option ng-selected="some.prop">Average</option>
    <option ng-selected="foo.bar.baz">Minimum</option>
    <option ng-selected="another">Maximum</option>
</select>

Answer 1

When selecting/deselecting <option> items in a <select>, only the ng-model attached to the <select> will change. Using ng-selected with <option> elements doesn't change that: the property specified by ng-selected is read-only.

Here's an example: http://plnkr.co/edit/zilmbj77WqOlXNTI6b10?p=preview

Perhaps you can represent this scenario better using a group of check-boxes? Like this:

<input type="checkbox" ng-model="some.prop" ng-true-value="a" ng-false-value="b" />  
<input type="checkbox" ng-model="foo.bar.baz" ng-true-value="foo" ng-false-value="bar" />  
<input type="checkbox" ng-model="another" ng-true-value="0" ng-false-value="1" />  

To accomplish a bi-directionally bound list of choices, you could use a custom drop-down with multiple checkboxes, like this one: http://isteven.github.io/angular-multi-select/#/main