JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://raw.github.com/localytics/angular-chosen/master/example/vendor/chosen.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
<script src="https://raw.github.com/localytics/angular-chosen/master/chosen.js"></script>
<script src="https://raw.github.com/localytics/angular-chosen/master/example/vendor/chosen.jquery.js"></script>
<div ng-app="app">
    <div ng-controller="IndexCtrl">
         <h1>Chosen Directive Example Usage</h1>

         <h2>Chosen with a promise: {{foo | json}}</h2>
        <button ng-click="show('event:a')">open</button>

        <select chosen open-on="event:a" multiple allow-single-deselect="true" data-placeholder="Choose Your Own Adventure" no-results-text="'Tough luck'" ng-model="foo" ng-options="value for value in optionsFromQuery" style="width:200px;">
            <option value=""></option>
        </select>
        <h2>Chosen with static options: {{ bar }}</h2>
        <button ng-click="show('event:b')">open</button>
  <select chosen disable-search="true" open-on="event:b" ng-model="bar">
    <option>Hi</option>
    <option>This is fun</option>
    <option>I like Chosen so much</option>
    <option>I also like bunny rabbits</option>
    <option value=""></option>
  </select>
    </div>
</div>

CSS

/* @group Base */
.chosen-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  zoom: 1;
  *display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.chosen-container .chosen-drop {
  position: absolute;
  top: 100%;
  left: -9999px;
  z-index: 1010;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #aaa;
  border-top: 0;
  background: #fff;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}
.chosen-container.chosen-with-drop .chosen-drop {
  left: 0;
}
.chosen-container a {
  cursor: pointer;
}

/* @end */
/* @group Single Chosen */
.chosen-container-single .chosen-single {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 0 0 8px;
  height: 23px;
  border: 1px solid #aaa;
  border-radius: 5px;
  background-color: #fff;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
  background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background-clip: padding-box;
  box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #444;
  text-decoration: none;
  white-space: nowrap;
  line-height: 24px;
}
.chosen-container-single .chosen-default {
  color: #999;
}
.chosen-container-single .chosen-single span {
  display: block;
  overflow: hidden;
  margin-right: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chosen-container-single .chosen-single-with-deselect span {
  margin-right: 38px;
}
.chosen-container-single .chosen-single abbr {
  position:...

JavaScript

var module = angular.module("app", ['localytics.directives']);
module.directive('chosen', function(){
    return {
        restrict:"A",
        link: function($scope,$element,$attrs){
            var event = $attrs.openOn;
            $scope.$on(event,function(){
                $element.trigger("chosen:open");
            });
        }
    }
});
module.controller('IndexCtrl', [
    '$scope', '$q', '$timeout', function ($scope, $q, $timeout) {
    var simulateAjax;
    simulateAjax = function (result) {
        var deferred, fn;
        deferred = $q.defer();
        fn = function () {
            return deferred.resolve(result);
        };
        $timeout(fn, 3000);
        return deferred.promise;
    };
    simulateAjax(['grooo', 'wowowowow', 'lakakalakakl', 'yadayada', 'insight', 'delve', 'synergy']).then(function (result) {
        return $scope.optionsFromQuery = result;
    });
        $scope.show = function(event) {
            $scope.$broadcast(event);
        };
    $scope.optionsFromQueryAsHash = (function () {
        var result;
        result = {
            win: "Brilliant Escape",
            fail: "Untimely Demise"
        };
        return simulateAjax(result);
    })();
    $scope.emptyOptions = (function () {
        return simulateAjax([]);
    })();
    $scope.directiveOptions = {
        no_results_text: "SO SORRY"
    };
    $scope.myPets = ['cat'];
    $scope.pets = {
        cat: 'Cat',
        dog: 'Dog',
        hamster: 'Hamster'
    };
    $timeout(function () {
        return $scope.$apply(function () {
            return $scope.myPets.push('hamster');
        });
    }, 1000);
    return $scope.disabled = true;
}]);