ng-model value becoming null while disabling the selected value in dynamic dropdown list - asp.net

Question

I have created a process for creating a dynamic dropdown list group on button click with the given number of the dropdown lists in an input field. Then i collect a user list from the database and showing all in these doropdown lists. Now my job is that if one user is selected by any dropdown then that option must be disabled for the others. How can i do that?
I tried that by disabling the selected option from the list, But when i am disabling the selected option, the dropdown ng-model that selected that option is becoming null.
For creating a dynamic Dropdown list:
<div class="col-md-3">
<div class="form-group-sm">
<input class="form-control" ng-model="numberOfLevels"
type="text" name="numberOfLevels" id="numberOfLevels">
</div>
</div>
<div class="col-md-7" >
<div class="form-group-sm">
<a href="#" type="button" class="btn btn-box-tool btn-primary"
style="color:white;"
ng-click="addLevels(numberOfLevels)" >Manage</a>
</div>
</div>
$scope.addLevels = function (num) {
getAllUsers();
$scope.showLevels = true;
$scope.levels = [];
var count = 0;
if (num > 0) {
while (count < num) {
count++;
//console.log(count);
$scope.levels.push({ 'key': count, 'value': count });
//console.log(count);
}
}
//console.log($scope.levels);
//getAllUsers();
$scope.approversInputList = [];
}
<div class="col-md-12" ng-show="showLevels" ng-repeat="a in levels">
<div class="form-group">
<div class="col-md-4">
<label for=" username">
Approver {{a.value}} :
</label>
<select class="browser-default custom-select form-control has-error"
ng-model="abc[a.value]"
ng-change="setApprovers(selectedFileId, selectedNoteSheetId,a.value, abc[a.value])">
<option></option>
<option id="select" ng-repeat="user in userList"
value="{{user.Id}}" ng-disabled="user.Disabled">
{{user.UserName}}
</option>
#*<option id="select" ng-repeat="user in userList"
value="{{user.Id}}"
ng-disabled="disabledList[user.Id]">
{{user.UserName}}
</option>*#
</select>
</div>
<div class="col-md-7">
</div>
</div>
</div>
User List View Model:
public int Id { get; set; }
public string UserName { get; set; }
public bool Disabled { get; set; }
AngularJs Code for Disabling Selected Option:
$scope.abc = {};
$scope.$watch('abc', function (newVal, oldVal) {
//console.log($scope.userList);
var aaa = $scope.approversInputList;
for (var i = 0; i < $scope.userList.length; i++) {
$scope.userList[i].Disabled = false;
//console.log($scope.abc);
angular.forEach($scope.abc, function (value) {
if ($scope.userList[i].Id == value) {
$scope.userList[i].Disabled = true;
//$scope.disabledList[value] = true;
}
});
}
//console.log($scope.disabledList);
}, true);
When the selected option is disabled the dropdown should show the selected username.

Answer 1

This is happening because your userList is only one instance for all select. So you set disabled in userList and it propagates to all the levels.
u can try this, it will be difficult to solve it exactly until u give a minimal reproducible example:
<select class="browser-default custom-select form-control has-error"
ng-model="abc[a.value]"
ng-change="setApprovers(selectedFileId, selectedNoteSheetId,a.value, abc[a.value])">
<option></option>
<option id="select{{$index}}" ng-repeat="user in userList"
value="{{user.Id}}" ng-disabled="abc[a.value] == user.Id">
{{user.UserName}}
</option>
</select>
And remove your for loop altogether. if ng-disabled="abc[a.value] == user.Id" does not work then instead of using ng-diabled use some class if the condition is met and do some css on that class to make it disabled urself.