Multiple entry select2 and angular model fetched by $resource

Question

I am having some difficulty figuring out how to make it all work together. Here is what I would like to do:

The model is fetched using $resource from the rest API:

var itemResource = $resource('http://blabla.com/items/:id');
$scope.item = itemResource.get({id: '12345'});

The returned item has some fields among which is one array field that lists the ids of the categories:

{
   "item_name: "some value",
   "categories": ["cat_id1", "cat_id7", "cat_id8"]
}

In the UI I want these categories to be shown as editable multi select. The user should not operate using ids, but rather he should see and be able to chose string representations which come from the mapping within the application. So in html:

<input type"text" ui-select2="categoryOptions" ng-model="item.categories" />

and also in controller:

var categoryMapping = [
   {id: "cat_id1", text: "CategoryAlpha"},
   ...
   {id: "cat_id8", text: "CategoryOmega"},
   ...
];

$scope.categoryOptions = {
    'multiple': true,
    'placeholder': 'Chose categories',
    'width': 'element',
    'data': categoryMapping,
};

Obviously the pieces of code above are not working and I don't know how to make them work to do what I want. ui-select2 wants the model (item.categories) to be an array of objects {id, text} and I want it to store only the ids in the items in the database and have the mapping separate. I can't be the first one to do it, there must be a solution, please help.

Thanks