display key value of the object in ui-select

Question

I am using ui-select to populate some data as choices, the data is stored in an array of objects, "pageArray", the object looks like this

{
    pageName: pageNameArray
}

example,

[{"alpha": [1,2,3,4]}, {"beta":[3,4,5,6,7]}, {"gamma": [6,4,2,0]}, ....]

Now in the ui-select, I want to show the choices as "alpha", "beta", "gamma", ... basically the key values, how do I do it?

The ui-select code I am using now is this

<ui-select ng-model = "page1.selected" style="width: 200px;" on-select = "getHost1List()">
    <ui-select-match placeholder = "Choose a page">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat = "page in pageArray | filter: {name: $select.search}">
        <span ng-bind-html = "page.name | highlight: $select.search"></span>
    </ui-select-choices>
</ui-select>

Or is there a better way of doing this?

Basically in the ui-select, I want to give the choices as ["alpha", "beta", "gamma", ....]. When we select a particular name, the corresponding object should be selected, for example if we select "alpha" in the list, then

page1.selected = { {"alpha": [1,2,3,4]} }

Answer 1

You could do it like this, change your object format to this

{
    "name": pageName,
    "data": pageNameArray
}

in the ui-select, you could query give choices as "name" only (suppose the name of the array is "arr"

<ui-select ng-model = "page1.selected" style="width: 200px;" on-select = "getHost1List()">
    <ui-select-match placeholder = "Choose a page">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat = "page in array | filter: {name: $select.search}">
        <span ng-bind-html = "page.name | highlight: $select.search"></span>
    </ui-select-choices>
</ui-select>

when a choice is selected, the object is selected, so you can even access the "data" of the selected object