JSFiddle - React, Tailwind, and code Playground

by clink

HTML

<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        <form name="demo">
            <input type="text" name="text" ng-model="demotext" />
            <dual-list dl-Values="demoValues" dl-Options="demoOptions" dl-required="true"></dual-list>
            <button type="button" ng-disabled="demo.$invalid">Save</button>
        </form> 
    </div>
</div>

CSS

input {
    display: block;
    width: 200px;
    margin: 5px
}
select {
    width: 100px;
    display: inline-block;
    margin: 5px;
}
button {
    display: block;   
}

JavaScript

var app = angular.module('myApp', []);

function AppCtrl($scope) {
    
    $scope.demotext = '';
    $scope.demoOptions = ['a', 'b', 'c'];
    $scope.demoValues = [];
};

app.directive('dualList', function() {
    return {
        restrict: 'E',
        scope: {
            dlOptions: '=',
            dlValues: '=',
            dlRequired: '='
        },
        link: function(scope, element, attrs, ctrl) {
            
            scope.$watch('dlValues', function() {
                scope.dlOptions = scope.dlOptions.filter( function(option) {
                    return scope.dlValues.indexOf(option) < 0;
                });
            });

            scope.addOption = function(item) {
                scope.dlValues.push(item);
                var index = scope.dlOptions.indexOf(item);
                scope.dlOptions.splice(index, 1);
            };

            scope.removeOption = function(item) {
                scope.dlOptions.push(item);
                var index = scope.dlValues.indexOf(item);
                scope.dlValues.splice(index, 1);
            };
        },
        template: '<select multiple="multiple" class="form-control">' +
    '<option ng-repeat="option in dlValues" value="{{option}}" ng-click="removeOption(option)" ng-required="dlRequired == true">{{option}}</option>' +
  '</select>' +
  '<select multiple="multiple" class="form-control">' +
    '<option ng-repeat="option in dlOptions" value="{{option}}" ng-click="addOption(option)">{{option}}</option>' +
  '</select>'
    };
});