Solution:
Success! I managed to resolve the issue by implementing this solution and creating a customized build of the ui-select. Hopefully, this fix will be incorporated into the official master branch soon!
Issue
Is there a way to set up a select element with multiple pre-selected values? I've attempted to do so, but the selected items are not appearing in the dropdown.
Initially, I suspected that the problem was related to asynchronously retrieved data via HTTP get requests. However, even a "static" plunker example created to illustrate the situation failed to display the selected items.
My assumption is that the discrepancy arises from obtaining data from two distinct sources, resulting in mismatched indices and references between the arrays. The list of categories is fetched through one service, while the chosen categories originate from another service, returning them along with the associated dataset. Loading all 45k users in a separate select just to pick the selected ones from such a vast list would be highly impractical.
So, how can I ensure that my existing selection data is correctly displayed in the ui-select component?
HTML
<body ng-controller="MainCtrl">
<label>Assigned Categories</label>
<ui-select
multiple
ng-model="categories.selected"
on-select="selectCategory($item, $model)"
on-remove="deselectCategory($item, $model)">
<ui-select-match placeholder="Select Category...">{{$item.name}}</ui-select-match>
<ui-select-choices
repeat="category in categories.categories track by category.id">
{{category.name}}
</ui-select-choices>
</ui-select>
<pre>{{categories | json}}</pre>
</body>
JS
var app = angular.module('plunker', [
'ui.select'
]);
app.controller('MainCtrl', function($scope) {
$scope.categories = {
selected: [
{
"id": "1",
"name": "Foo"
}
],
categories: [
{
"id": "1",
"name": "Foo 1"
},
{
"id": "2",
"name": "Bar 2"
},
{
"id": "3",
"name": "FooBar 3"
}
]
};
});