AngularJS multiple select elements can not have the same value - angularjs

Question

I'm quite new to AngularJS and I'm trying to define 4 seperate select elements usign element directives.
app.directive('playerselect', function() {
return {
restrict: 'E',
replace: true,
templateUrl: 'templates/directives/player-select.html',
}
});
<select ng-options="player.full_name for player in players">
<option value="" selected disabled>Kies een speler</option>
</select>
When a user selects an option in one of the select elements I want the other select elements to be updated, so that the selected option gets disabled in all other select elements. Basically, I want to make sure that each option can get chosen only once.
Any ideas on how to do this?

Answer 1

I would do it like this:
directive
app.directive('playerSelect', function() {
return {
templateUrl: ...
scope: {
players: '=',
selectedPlayer: '=',
selectedPlayers: '=',
},
controller: function($scope) {
$scope.isDisabled = function(player) {
return $scope.selectedPlayers.indexOf(player) > -1 &&
player !== $scope.selectedPlayer)
};
},
}
});
directive template
<select ng-model="selectedPlayer">
<option ng-repeat="player in players" ng-disabled="isDisabled(player)">{{player}}</option>
</select>
controller
app.controller('PlayerController', function($scope) {
$scope.players = ...
$scope.selectedPlayers = [
$scope.player1,
$scope.player2,
$scope.player3,
$scope.player4,
];
});
controller template
<div ng-controller="PlayerController">
<player-select players="players" selected-players="selectedPlayers" selected-player="player1"></player-select>
<player-select players="players" selected-players="selectedPlayers" selected-player="player2"></player-select>
<player-select players="players" selected-players="selectedPlayers" selected-player="player3"></player-select>
<player-select players="players" selected-players="selectedPlayers" selected-player="player4"></player-select>
</div>

Answer 2

Check this jsFiddle for see it in action.
I would recommend you an use of directive two way data binding and ngModelController.
So in your html :
<player-select players="players" ng-model="select1"></player-select>
<player-select players="players" ng-model="select2"></player-select>
<player-select players="players" ng-model="select3"></player-select>
In your controller :
$scope.players = [{
name: 'foo'
}, {
name: 'bar'
}, {
name: 'baz'
}];
And the directive, using scope.$watch for update each list :
angular.module('fiddleApp').directive('playerSelect', function ($rootScope) {
return {
restrict: 'E',
require: 'ngModel',
scope: {
players: '='
},
template: '<select ng-model="selected" ng-options="player.name for player in playersCopy"></select>',
link: function (scope, el, attrs, ngModel) {
function update() {
scope.playersCopy = angular.copy(scope.players);
if (scope.selected) {
scope.playersCopy.push(scope.selected);
}
}
scope.$watch('selected', function (newValue, oldValue) {
if (newValue) {
scope.players.splice(scope.players.map(function (a) {
return a.name
}).indexOf(newValue.name), 1);
if (oldValue) { scope.players.push(oldValue); }
ngModel.$setViewValue(scope.selected);
$rootScope.$broadcast('playersUpdate');
}
});
scope.$on('playersUpdate', function () {
update();
});
update();
}
};
});