JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<!doctype html>
<html>
    <head></head>
<body ng-controller="MyCtrl">
    <shuttle-boxes ng-options="item for item in itemList" ng-model="myModel" />
</body>
</html>

JavaScript

var myApp = angular.module('myApp', []);
angular.element(document).ready(function() {
   angular.bootstrap(document, ['myApp']);
});

function MyCtrl($scope) {
    $scope.itemList = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6', 'Option 7', 'Option 8', 'Option 9', 'Option 10'];
    $scope.myModel = [];
}

myApp.directive('shuttleBoxes', function($timeout) {
    return {
        restrict: 'E',
        scope: {},
        template: '<div class="shuttle-boxes">' +
            '<select multiple="multiple" class="shuttle-boxes-left"></select>' +
            '<button class="shuttle-boxes-btn" type="button"><i class="icon icon-arrow-right"></i></button>' +
            '<button class="shuttle-boxes-btn" type="button"><i class="icon icon-arrow-left"></i></button>' +
            '<select multiple="multiple" class="shuttle-boxes-right"></select>' +
            '</div>',
        replace: true,
        require: 'ngModel',
        compile: compiler
    }

    function compiler(cElement, cAttrs, transclude) {

        var availableList = cElement.find('.shuttle-boxes-left'),
            repeater = cAttrs.ngOptions;

        availableList.attr('ng-options', repeater);

        return linker;
    }

    function linker(scope, element, attrs) {

    }
});