JSFiddle - React, Tailwind, and code Playground

by Jed Mao

HTML

<div data-ng-controller="controller">
    <div data-ng-model="color" data-options="c as c.name group by c.shade for c in colors" data-label="foo" data-name="foo" data-labeled-select>
        <option value="">--- select something---</option>
    </div><br>
    selected value: {{color.name}}
</div>

JavaScript

angular.module('app', [])
.controller('controller', function($scope) {
    $scope.colors = [
        {name:'black', shade:'dark'},
        {name:'white', shade:'light'},
        {name:'red', shade:'dark'},
        {name:'blue', shade:'dark'},
        {name:'yellow', shade:'light'}
    ];
    $scope.color = $scope.colors[2];
})
.directive('labeledSelect', function(){
    return {
        require: ['ngModel'],
        restrict: 'A',
        replace: true,
        transclude: true,
        template: [
            '<label class="labeled-select">',
            '  <span class="labeled-select__label">{{label}}</span>',
            '  <select class="labeled-select__select" data-ng-model="ngModel" data-ng-transclude></select>',
            '</label>'
        ].join(''),
        scope: {
            ngModel: '=',
            label: '@',
            name: '@',
            required: '@',
            ngRequired: '='
        },
        compile: function(tElement, tAttrs) {
            var $select = tElement.find('select');
            setInterval(function() {console.log($select.val());}, 1000);
            $select.attr('data-ng-options', tAttrs.options);
            return {
                pre: function(scope, iElement, iAttrs, controller) {
                    var m = iAttrs.options.match(/in +(\w+)/);
                    var list = m && m[1];
                    if (list) {
                        scope[list] = scope.$parent[list];
                    }
                    var name = iAttrs.name;
                    if (name) {
                        $select.attr('name', name);
                    }
                    var required = iAttrs.required;
                    if (required) {
                        $select.attr('required', true);
                    }
                    var ngRequired = iAttrs.ngRequired;
                    if (ngRequired) {
                        $select.attr('data-ng-required', ngRequired);
                    }
                }
          ...