Angular Unique Selects w/ ng-repeat

by jacobwsmith

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/flick/jquery-ui.css">
<!-- <input id="temp" type="text"> -->
<div ng-controller="MainCtrl">
    <hr>
    <p ng-repeat="user in userList">
        <select ng-model="user.id" ng-change="userSelectChanged($index)" ng-required="true" ng-options="option.value as option.label for option in userOptions"></select>{{user.id}} <a href="#" ng-click="removeUser($index)">Delete</a><br><br>
   </p>
   <p><a ng-click="addUser()">Add</a></p>

CSS

.some {
    border: 1px solid #cacaca;
    padding: 10px;
}
.ng-invalid {
    background-color: #FFF999;
}
.test {
    border: 3px solid green;
}

JavaScript

// ===========================================
// App
// ===========================================
var app = angular.module('myapp', []);
// ===========================================
// Controller
// ===========================================
app.controller('MainCtrl', function ($scope, $timeout) {
    
    // User Select Options ====================
    $scope.userOptions = [{
        value: '1',
        label: 'John Doe'
    }, {
        value: '2',
        label: 'Larry Doe'
    }, {
        value: '3',
        label: 'Sarah Doe'
    }];
    
    // User List ======================
    $scope.userList = [];/*{
        id: '1',
        selectable: true
    },{
        id: '2',
        selectable: true
    }];*/
    
    // Add User ====================
    $scope.addUser = function(){
        console.log('addUser') 
        var defaultObj = {
            id: '',
            selectable: true
        };
        $scope.userList.push(defaultObj);
        $scope.userListRemoved.push(defaultObj);
    };
    // Remove User  ====================
    $scope.removeUser = function(index){
        console.log('Remove user: ' + index);
        $scope.userList.splice(index, 1);
    };
    
    $scope.userSelectChanged = function(index){
        console.log('userSelectChange: ' + index);
        
        // Find optins that match id
        var id = $scope.userList[index].id;
        for(var i=0;i<$scope.userOptions.length;i++){
             console.log($scope.userOptions[i]);
            if($scope.userOptions[i].value = id){
                console.log('YEP');
                // Add to remove list
                $scope.userListRemoved.push($scope.userOptions[i]);
                // Then remove from options and 
                $scope.userOptions.splice(i, 1);
                break;
            }
        }
        console.log($scope.userOptions);
        console.log($scope.userListRemoved);
        
        
    };

    // User Removed ====================
   ...