Dependent Selects

HTML

<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
    <button ng-click="schedule.days.push({});">Add</button>
    <button ng-click="schedule.days.pop({});">Add</button>
    <div ng-repeat="schedDay in schedule.days">
        <select ng-model="schedDay.day" ng-change="updateAvailability()">
            <option ng-repeat="day in days|orderBy:value" ng-disabled="!day.selectable" value="{{day.day}}">{{day.display}}</option>
        </select>
    </div>
    {{ schedule }}
</div>

JavaScript

angular.module('test', [])

.controller('testCtrl', function($scope) { 
    $scope.schedule = {days: []};
    
    var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    $scope.days = [];
    
    for (var i = 0; i < 7; i++) {
        $scope.days.push({day: i, display: dayNames[i], selectable: true});
    }
    
    $scope.updateAvailability = function() {
        var used = $scope.schedule.days.map(function(day) {
            return parseInt(day.day || '-1');
        });
        
        angular.forEach($scope.days, function(day) {
            day.selectable = used.indexOf(day.day) === -1 ? true : false;
        });
    }
});