I want to streamline the use of select-ui by creating a wrapper in a directive. This way, I can easily update the control in one place and avoid the hassle of scattering it all over my site.
Despite building a wrapper, I'm facing an issue where the value in the select isn't getting updated.
Check out this plunkr for an example of the code:
http://plnkr.co/edit/QZP0MsDQOmafOW3dcfhT?p=preview
To use the ui-select, simply do the following:
<div dropdown-select ng-model="input"></div>
EDIT:
I may not have explained myself clearly, but what I want is to use ng-model on the wrapper directive called dropdown-select. I don't want to be restricted to using the same scope variable names every time I implement dropdown-select.
For instance, with inputs, you can do:
<input ng-model="input1" />
<input ng-model="myVarName" />
<input ng-model="somethingDifferent" />
All three examples above will work and hold values from the input.
Similarly, I want to achieve the same flexibility with the wrapper directive I've used, just like with inputs and other controls.
Therefore, I should be able to do:
<div dropdown-select ng-model="input1"></div>
<div dropdown-select ng-model="myItem"></div>
<div dropdown-select ng-model="whateverIWant"></div>
The select-ui should then populate the selected item into these scope variables once a value is selected.
Here's a plunkr with 2 instances of the dropdown-select wrapper, neither showing the selected value when the select-ui value is chosen: