JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.io/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>
<div data-ng-app="app">
    <form data-ng-controller="myCtrl">
    <span>Example 1:</span>
        <select data-ng-model="example1" data-bs-selectbox="" name="testcase">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select> 
    <span>You've selected: {{example1}}</span>
    <br>
    <br> 
    <span>Example 2:</span>
        <select data-ng-model="example2" data-bs-selectbox="Select Item" name="kljasdjklsad">
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
        </select> 
    <span>You've selected: {{example2}}</span>
    <br><br><br>
        <hr><button class="btn btn-success serializeAlert">TEST : serialize form to check selected option's</button>
    </form>
</div>

CSS

form{ border:1px dashed gray; padding:10px; margin:10px;}

JavaScript

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

function myCtrl($scope) {
//    $scope.example1 = "";
//    $scope.example2 = "";
}
//Bootstrap dropbox directive
thisApp.directive('bsSelectbox', function ($compile, $timeout, $parse) {
    return {
        restrict: 'A',
        priority: 100,
        transclude: true,
        scope: {
            themodel: '=ngModel',
            defaultval: '@bsSelectbox',
            name: '@name'
        },
        template:
            '<div class="bs-selectbox" style="display:inline;">' +
                '<div class="btn-group">' +
                    '<button class="btn dropdown-toggle" data-toggle="dropdown" type="button">' +
                        '{{display}} ' +
                        '<span class="caret"></span>' +
                    '</button>' +
                    '<ul class="dropdown-menu">' +
                        '<li ng-show="defaultval">' +
                            '<a href="#" ng-click="change(false)"><span>{{defaultval}}</span></a>' +
                        '</li>' +
                        '<li ng-show="defaultval" class="divider"></li>' +
                        '<li ng-repeat="itm in elements">' +
                            '<a href="#" ng-click="change(itm)">' +
                                '<span>{{itm.label}}</span>' +
                            '</a>' +
                        '</li>' +
                    '</ul>' +
                '</div>' +
                '<select style="display:none;" name="{{name}}" class="bs-selectbox-transclude" ng-transclude ></select>' +
            '</div>',
        link: function (scope, element, attrs) {
            scope.display = '--';
            scope.elements = [];
            scope.element = angular.element(".bs-selectbox").index(element);
            attrs.$observe('bsSelectbox', function (value) {
                if (value) scope.display = value;
            });
            scope.$watch('themodel', function () {
                scope.setdefault();
          ...