Angular UI select - adding and removing objects in an array (each object is a new select)?

Question

Angular

Hello.
There is an array of "categories (id, name)" of the user. It is necessary to add a NEW select by the "+" button, from which you can then select the required Category. Also, by clicking the "-" button, you need to delete the required Category along with the select.
In this case, after adding an object to the general array, select is added, but the selected value is not stored in the current object (id and name remain empty).
Please tell me how to implement it.
There is the following code:

<label class="control-label">Категории</label> <a ng-click="categoryAdd()" class="btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></a>

                <div class="form-group" ng-repeat="category in userProfile.categories">
                    <ui-select ng-model="category"
                               theme="bootstrap"
                               reset-search-input="false"
                               on-select="categorySelected($item, $model)">
                        <ui-select-match placeholder="Выберите категорию...">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="item in (categories | filter: $select.search) track by item.id">
                            <div ng-bind-html="item.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                    <a ng-click="categoryDelete()" class="btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></a>
                </div>

$scope.categoryAdd = function() {
            $scope.userProfile.categories.push({id: '', name: ''});
};
 $scope.categoryDelete = function(???) {
            ???
};