Angularjs: Disable selected item after selection is made

Here is what I have been dealing with for some time now.

For now don't worry about what a plate , orientation or slot is. I will try to explain the main problem here.

When a container is selected, a call is made to the API to fetch all the slots of that particular container. An array is returned with all the slots

To add another field I use this simple code

            $scope.fields = [{
            plate_id: "",
            orientation_id: "",
            slot_id: "",
        }];

          /**
         * Add fields by clicking on the plus button
         */
        $scope.addFormField = function() {
            var newItemNo = $scope.fields.length + 1;
            $scope.fields.push({
                plate_id: "",
                orientation_id: "",
                slot_id: "" + newItemNo
            });
        };

To delete a row I use this one.

    /**
     * Remove fields by clikcing the trash button
     * @return fields - scope
     */
    $scope.removeFormField = function() {
        var lastItem = $scope.fields.length - 1;
        $scope.fields.splice(lastItem);
    };

This works just fine. I ng-repeat the fields in html just like this.

    <div class="panel-body">
                <div class="form-group form-group-lg" ng-repeat="form in fields" ng-class="{ 'has-error': loadingForm.plate.$invalid, 'has-success': plate }">
                    <label class="col-sm-2 control-label">Add Plates</label>

                    <!-- PLATE -->
                    <div class="col-xs-3">
                        <ui-select ng-model="form.plate_id" name="plate" ng-disabled="!$select.search.length && !$select.items.length" theme="bootstrap" ng-required="true">
                            <ui-select-match placeholder="{{$select.disabled ? 'No items available' :'Plate'}}">{{$select.selected.serial_number}}</ui-select-match>
                            <ui-select-choices repeat="item.id as item in plates | filter: $select.search">
                                <div ng-bind-html="item.serial_number"></div>
                            </ui-select-choices>
                        </ui-select>
                    </div>

                    <!-- ORIENTATION -->
                    <div class="col-sm-3" ng-controller="OrientationsCtrl" ng-class="{ 'has-error': loadingForm.orientation.$invalid }">
                        <ui-select ng-model="form.orientation_id" name="orientation" ng-disabled="!$select.search.length && !$select.items.length" theme="bootstrap" ng-required="true">
                            <ui-select-match placeholder="{{$select.disabled ? 'No items available' :'orientation'}}">{{$select.selected.name}}</ui-select-match>
                            <ui-select-choices repeat="item.id as item in allItems | filter: $select.search">
                                <div ng-bind-html="item.name | highlight: $select.search"></div>
                                <small ng-bind-html="item.description | highlight: $select.search"></small>
                            </ui-select-choices>
                        </ui-select>
                    </div>


              <div class="col-xs-1" ng-class="{ 'has-error': loadingForm.slot.$invalid }">
                        <ui-select ng-model="form.slot_id" name="slot" ng-disabled=" ! $select.search.length && !$select.items.length" theme="bootstrap" ng-required="true">
                            <ui-select-match placeholder="{{$select.disabled ? 'No slots' :'slot'}}">{{$select.selected.slot.slot}}</ui-select-match>
                            <ui-select-choices repeat="item in freeSlots | filter: {selected: false}">
                                <div ng-bind-html="item.slot.slot"></div>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                    <button ng-click="removeFormField()" ng-show="$first -1 " class="btn btn-lg btn-danger">
                        <i class="glyphicon glyphicon-trash"></i>
                    </button>
                </div>
            </div>

.. and it just works.

The problem.

What I am trying to achieve here is when a user selects a slot lets say slot 1 in this case. When another row is added I want to disable the previously selected slot (which is the 1) and show only the slots which are available for selection (2,3,4..etc)

I have been digging through and found couple of examples such as this one and this one but I am just not sure how to apply those methods into mine.

I also added a selected key to the slots array, just like this.

                        angular.forEach(slots, function (slot) {
                      $scope.masterListOfSlots.push({
                          slot: slot,
                          selected: false,
                      });
                    });

And filtered it in the html, but wasn't sure again.

Note: The user must be able to deselect and select between slots.

Would someone show me a proper way to solve this. Thanks!