How to repeat object properties in angular ui-select-choices? - angularjs

Question

I have an object as
{
key1: value1,
key2: value2
}
How will repeat this in ui-select-choices? I tried a few things but nothing worked as
<ui-select ng-model="selectedChoice" theme="select2">
<ui-select-match placeholder="{{'select_product' | translate}}" allow-clear="true">
<span ng-bind="$select.selected"></span>
</ui-select-match>
<ui-select-choices repeat="key as (key, value) in (productList | filter: $select.search)">
<span>{{::key}}</span>
</ui-select-choices>
</ui-select>

Answer 1

This should work:
<ui-select-choices repeat="product.key as (key, product) in productList | filter: {'value':$select.search}">
<span ng-bind-html="product.value"></span>
</ui-select-choices>
Angular UI Select iterates over objects kinda this way: during iterating for each pair (key, value) instead of accessing the value directly, an object (it's named product in my code above) is created that consists of two properties named key and value, where key is an actual key of the initial object, value is a value for the key. This object should be used to access a real value.
For example, for the following initial data object
{
key1: {
id: 1,
name: 'John'
},
key2: {
id: 2,
name: 'Alex'
}
}
on the first iteration such object will be created:
{
key: 'key1',
value: {
id: 1,
name: 'John'
}
}
For your data object, the following object will be created on the first iteration (product):
{
key: 'key1',
value: 'value1'
}