javascript - Angular ui-select2 with AJAX multiselect - retrieve final selection values as ids instead of json -

angular ui-select2 ajax multiselect - retrieve final selection values ids instead of json

problem statement

i want use tokeninput/chosen/select2 style of ui control edit array of ids in model. array of ids value of 1 property in larger model i'm building editor/form for. after editing array of ids, when submit model server, want property submitted array of ids, not array of json objects.

when using angular's ui-select2 component, contents of property replaced array of json objects. it's not clear how undo after editing complete. thought might using wrong component, threads seem point using ui-select2 when doing kind of thing angular.

explanation

the data model starts out 'myprop' property that's array of ids:

{"myprop":["4","6"]} 

the ui-select2 directive replaces ids json objects. here example of model looks ui-select2 loaded. (live demo in plunker: http://plnkr.co/edit/vef1vwnrhnydb9aur9zo ):

{"myprop":[{"id":"4","text":"label 4"},{"id":"6","text":"label 6"},{"id":7,"text":"seventh","color":"blue"}]} 

when save model, want property submitted server array of ids, not array of json objects. want flatten array down ids instead of json objects. select2 api provides val method return array of ids. how can/should use in context of angular's ui-select2 component?

caveat:i'm doing multiple times on page multiple properties, hard-coded fix specific property not work. has happens automatically proptery i'm editing select2

the sample code

(see code in plunker: http://plnkr.co/edit/vef1vwnrhnydb9aur9zo)

in select2 directive, tried changing instances of:

    elm.select2('val', 

to

    elm.select2('data', 

and worked, once you'd added or removed element. however, adding

    elm.trigger('change');  

to initselection section, triggers on loading, think should give desired behaviour.

here's plunker.