SlushBucketJS

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <script src="lib/script.js"></script>
  </head>

  <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl">
      <div class="slushbucket">
        <div class="bucket">
          <select class="bucket-select" ng-model="selectedFrom" multiple ng-options="item.value as item.label for item in options | filter:item.selected='false' | orderBy:'label'">
          </select>
        </div>
        <div class="tools">
          <button ng-click="select()">&gt;</button>
          <button ng-click="unselect()">&lt;</button>
        </div>
        <div class="bucket">
          <select class="bucket-select" multiple ng-model="selectedTo" ng-options="item.value as item.label for item in options | filter:item.selected='true' | orderBy:'label'"></select>
        </div>
      </div>

      <code><pre>{{options | json}}</pre></code>
    </div>
  </body>
</html>

import angular from 'angular';

angular.module('plunker', []).controller('MainCtrl', function($scope) {
  $scope.selectedFrom = [];
  $scope.selectedTo = [];
  $scope.options = [
    {
      id: 1,
      label: "Pepito el cretino",
      value: "pepito",
      selected: false,
    },
    {
      id: 2,
      label: "Juan el que no es cretino",
      value: "juan",
      selected: true,
    },
    {
      id: 3,
      label: "Pedro otro tipo mas",
      value: "pedro",
      selected: true,
    },
    {
      id: 4,
      label: "Fulano",
      value: "fulano",
      selected: true,
    },
    {
      id: 5,
      label: "Juan",
      value: "juan_2",
      selected: true,
    }
  ];

  $scope.select = () => {
    const selectedObjs = $scope.options.filter(el => $scope.selectedFrom.includes(el.value));
    for (let item of selectedObjs) {
      item.selected = true;
      $scope.selectedTo.push(item.value);
    }

    $scope.selectedFrom = [];
  };

  $scope.unselect = () => {
    const selectedObjs = $scope.options.filter(el => $scope.selectedTo.includes(el.value));
    for (let item of selectedObjs) {
      item.selected = false;
      $scope.selectedFrom.push(item.value);
    }

    $scope.selectedTo = [];
  };
});

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}

h1,
p {
  font-family: sans-serif;
}


.slushbucket {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.bucket {
  height: 100%;
  width: max-content;
  min-width: 100px;
}

.bucket-select {
  width: 100%;
}

.tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

{
  "name": "@plnkr/starter-angularjs",
  "version": "1.0.1",
  "description": "AngularJS starter template",
  "dependencies": {
    "angular": "^1.6.9"
  },
  "plnkr": {
    "runtime": "system",
    "useHotReload": false
  }
}