ng-model in select-2 takes value from contents of the option, instead of ng-value, when the contents contain more than one Angular expression

[Simberific]

Note: for support questions, please use one of these channels: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Using ng-model in a select-2 takes the value from the contents of the option (the displayed text in the dropdown), instead of the ng-value, when the contents contain more than one Angular expression. When it's just one Angular expression this does not happen, as expected.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (template: http://plnkr.co/edit/tpl:yBpEi4).

Here is my example:

                 <select ui-select2="{dropdownAutoWidth: true}"
                              ng-change="copyFromTaskDefinition(formBuilder.taskDefinitionNameToCopy)"
                              ng-model="formBuilder.taskDefinitionNameToCopy">
                        <option value=""></option>
                        <option
                            ng-repeat="otherTask in otherTaskDefinitions | orderBy:'taskDefinitionName'"
                            ng-value="otherTask.taskDefinitionName">
                            {{ otherTask.taskDefinitionName }}
                            {{ otherTask.isDraft && '(draft)' || '' }}
                        </option>
                      </select>

What is the expected behavior?
The expected behavior is that ng-model is populated with "otherTask.taskDefinitionName" from ng-value. But instead, it is populated with

{{ otherTask.taskDefinitionName }}
                            {{ otherTask.isDraft && '(draft)' || '' }}

whitespace and all.

What is the motivation / use case for changing the behavior?
This leads to bugs in consumer code because the ng-model is expected to be populated with the ng-value instead of the displayed text

Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.

Other information (e.g. stacktraces, related issues, suggestions how to fix)

[gkalpak]

This is a variation of this known issue and the following feature of the select directive:

When an item in the <select> menu is selected, the value of the selected option will be bound to the model identified by the ngModel directive. With static or repeated options, this is the content of the value attribute or the textContent of the <option>, if the value attribute is missing.

_{(emphasis mine)}

So, because there is no value attribute at first, the textContent is applied as value. The reason why it works with one interpolation but not with more is that the order of execution is different (due to some optimization for single interpolations):

• With one interpolation: The interpolation is applied immediately, setting value to textContent. ngValue then applies the correct value and overwrites textContent.
• With two interpolation: The interpolation is deferred. ngValue sets the value attribute. Then the interpolation overwrites it with the textContent.

BTW, this also happens with the native select: Demo

Although it is not an issue any more on 1.6 (possibly due to ngValue setting the value property in addition to the attribute), I think it is reasonable for 1.5.x to prevent the aforementioned select feature if ngValue is present (not only value).

As a workaround, you can provide a dummy value attribute that will be overwritten by ngValue (as shown in my demo above).

[gkalpak]

So, it turns out it was explicitly fixed on 1.6.x (here) as part of a larger change that was never backported as it included breaking changes.

[Simberific]

Ah thank you for the explanation @gkalpak - that makes sense now why it is happening.

[petebacondarwin]

I think it might be possible to just backport that bit of the fix. What do you think @Narretz ?

[Narretz]

I'll take a look :D