JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<div id="app" ng-app="myApp" ng-controller="myCtrl">
  <p ng-repeat="x in lists">
    <select ng-model="x.selectedTest" ng-init="x.selectedTest = '-1'">
      <option value="-1">Select</option>
      <option ng-repeat="y in test | filter:filtTest" value="{{y.id}}">{{y.val}}</option>
    </select>
    <button ng-click="remList($index)" ng-hide="$first && lists.length == 1">-</button>
    <button ng-click="addList()" ng-if="$last && lists.length !== test.length">+</button>
  </p>


</div>

JavaScript

angular.module('myApp', []).controller('myCtrl', function($scope, $filter) {

  $scope.lists = [{
    id: 1
  }];

  $scope.test = [{
    id: 3,
    val: "a"
  }, {
    id: 1,
    val: "b"
  }, {
    id: 2,
    val: "c"
  }, {
    id: 10,
    val: "d"
  }];

  $scope.addList = function() {
    $scope.lists.push({
      id: $scope.lists.length + 1
    });
  };

  $scope.remList = function(ind) {
    $scope.lists.splice(ind, 1);
  };

  $scope.filtTest = function(a) {
    var ids = [];
    for (var i = 0; i < $scope.lists.length; i++) {
    //  if ($scope.lists[i].selectedTest !== '-1' && parseInt($scope.lists[i].selectedTest) !== a.id)
        ids.push(parseInt($scope.lists[i].selectedTest));
   //  return false;
    // break;
    }
    
   if (ids.indexOf(a.id) !== -1 )
     return false;
    return true;
  }

});