AngularJS Example:

by Pasit R

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
Here are the steps (IE11):
<br />
<br />
<ol>
    <li>Select Bender</li>
    <li>Click the duplicate link</li>
    <li>Select Fry</li>
    <li>Notice that the one that is selected is Leela but the model still has fry (id:2) as the one selected</li>
</ol>
<br />
<br />
<div ng-app="myapp">
    <div ng-controller="Ctrl">
        <div ng-repeat="aSelection in selectedIds ">
            <select ng-model="aSelection.id" ng-options="a.value as a.name for a in allIds | ddlFilter:aSelection:selectedIds">
                <option value="">--Select--</option>
            </select> <a href="#" ng-click="dupDropDown(aSelection)">Duplicate</a>

        </div>
        <br/>{{ selectedIds }}</div>
</div>

JavaScript

var myapp = angular.module('myapp', ['appFilters']);


myapp.controller('Ctrl', function ($scope) {
    $scope.selectedIds = [{}];

    $scope.allIds = [{
        name: 'Bender',
        value: 1
    }, {
        name: 'Fry',
        value: 2
    }, {
        name: 'Leela',
        value: 3
    }];

    $scope.dupDropDown = function (currentDD) {
        var newDD = angular.copy(currentDD);
        $scope.selectedIds.push(newDD);
    }
});


angular.module('appFilters', []).filter('ddlFilter', function () {
    return function (allIds, currentItem, selectedIds) {


        //console.log(currentItem);
        var listToReturn = allIds.filter(function (anIdFromMasterList) {
            if (currentItem.id == anIdFromMasterList.value) return true;

            var areThereAny = selectedIds.some(function (aSelectedId) {
                return aSelectedId.id == anIdFromMasterList.value;
            });
            return !areThereAny;
        });
        return listToReturn;
    }
});