how to make ng-model value set by ui-select value

Question

I am currently using angular-ui/ui-select in my project. I am able to bind the value of the ui-select to an object without issue, however it is binding the entire item that is being iterated over. I would like to only bind based on the item.codeId this would allow me to persist the correct data as well as display the correct value in the drop down when the page is loaded.

How can I setup ui-select to do this?

<ui-select ng-model="myObject.stateCode" id="stateCode">
    <ui-select-match placeholder="Select a state...">{{$select.selected.codeDescription}}</ui-select-match>
    <ui-select-choices repeat="item in constants.states | filter: $select.search" value="{{$select.selected.codeId}}">
        <div ng-bind-html="item.codeDescription | highlight: $select.search"></div>
        <small ng-bind-html="item.codeId | highlight: $select.search"></small>
    </ui-select-choices>
</ui-select>

Answer 1

I believe what you would do is use the repeat= clause and get rid of the value property. An example is here: http://plnkr.co/edit/htm8UNxVOlC076LVVezE?p=preview

Which I sort of copied from: https://github.com/angular-ui/ui-select/blob/master/examples/demo-bind-to-single-property.html

<ui-select ng-model="myObject.stateCode" id="stateCode">
    <ui-select-match placeholder="Select a state...">{{$select.selected.codeDescription}}</ui-select-match>
    <ui-select-choices repeat="item.codeId as item in constants.states | filter: $select.search">
        <div ng-bind-html="item.codeDescription | highlight: $select.search"></div>
        <small ng-bind-html="item.codeId | highlight: $select.search"></small>
    </ui-select-choices>
</ui-select>

Answer 2

Your code is fine, but there was a bug that caused this when using a child array (constants.states).

I just fixed this issue at https://github.com/angular-ui/ui-select/pull/131, specifically this commit

New version v0.5.1 released. If you're using bower, just run bower update.