JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <select ng-repeat="currId in selectedIds" ng-model="selectedIds[$index]" ng-options="currOption.id as currOption.value for currOption in myObj | myfilter:selectedIds:$index"></select>
    <br>{{selectedIds}}</div>

JavaScript

angular.module("myApp", [])
    .controller("MyCtrl", function($scope) {
        $scope.selectedIds = ["C", "E", "F", "G"];
        
        $scope.myObj = [{
            id: "A",
            value: "AAA"
        },
        {
            id: "B",
            value: "BBB"
        },
        {
            id: "C",
            value: "CCC"
        },
        {
            id: "D",
            value: "DDD"
        },
        {
            id: "E",
            value: "EEE"
        },
        {
            id: "F",
            value: "FFF"
        },
        {
            id: "G",
            value: "GGG"
        }]
    })
    .filter("myfilter", function () {
        
        function isIdInUse(selectedIds, id)
        {
            var retVal = false;
            angular.forEach(selectedIds, function (currentSelectedId) {
                if (id == currentSelectedId)
                {
                    retVal = true;
                }
            });
            return retVal;
        }
        
        return function(allOptions, selectedIds, index) {
            
           var newOptions = [];
            
            angular.forEach(allOptions, function (currentOption) {
                
                if (currentOption.id == selectedIds[parseInt(index)] || !isIdInUse(selectedIds, currentOption.id))
                {
                    newOptions.push(currentOption);
                }
            });
            
            return newOptions;
        };
    });