JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-editable-select.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-editable-select.min.css">
<div ng-app="test" ng-controller="testCtrl">
  <form name="testForm" novalidate>

    <select name="color1" editable-select ng-model="selectedColor" pattern="^#(?:[0-9a-fA-F]{3}){1,2}$">
      <option ng-repeat="color in colors" value="{{color.code}}" style="background-color: {{color.code}}">{{color.name}}</option>
    </select>
    <pre>{{testForm.color1.$error}}</pre>
    <select name="color2" editable-select ng-options="color.id as color.name for color in colors" ng-model="selectedColor"></select>
    <pre>{{testForm.color2.$error}}</pre>
    <input type="text" ng-model="selectedColor">


    <button ng-click="generateRandomColor()">Random Color</button>

    <div class="box" ng-style="{'background-color': selectedColor}"></div>
  </form>
</div>

CSS

div.editable-select {
  display: inline-block;
}

input.es-input {
  border: 1px solid #ddd;
  padding: 10px 7px;
  border-radius: 3px;
}

.box {
  width: 50px;
  height: 50px;
  border: 1px solid #ddd;
  margin: 10px;
}

pre {
  border: 1px solid #ddd;
  background: #eee;
  padding: 20px;
}

JavaScript

angular.module('test', [])
  .directive('editableSelect', function() {
    return {
      restrict: 'EA',
      require: 'ngModel',
      scope: {
        modelValue: '=ngModel'
      },
      link: function(scope, elm, attr, ngModelCtrl) {
        var exp = /^#(?:[0-9a-fA-F]{3}){1,2}$/;

        ngModelCtrl.$validators.validPattern = function(modelValue, viewValue) {
          var value = modelValue || viewValue;
          if (!attr.pattern) {
            return exp.test(value);
          }
        };

        $(elm).wrap('<div class="editable-select"/>');
        var wrapper = $(elm).parent();

        scope.$watch('modelValue', function(nv, ov) {
          if (nv !== ov) {
            scope.updateEditableModel();
          }
        });

        scope.updateEditableModel = function(val) {
          var input = wrapper.find('input.es-input');
          input.val(ngModelCtrl.$viewValue);
          wrapper.css('background-color', ngModelCtrl.$viewValue);
        };

        setTimeout(function() {
          $(elm).editableSelect({
              appendTo: 'body'
            })

            .on('hidden.editable-select', function(e) {
              var input = wrapper.find('input.es-input');
              ngModelCtrl.$setViewValue(input.val());
            });
        }, 20);


        setTimeout(function() {
          scope.updateEditableModel();
        }, 10);
      }
    };
  })
  .controller('testCtrl', function($scope) {
    $scope.colors = [{
      name: '#000000',
      id: 1,
      code: '#000000'
    }, {
      name: '#0000FF',
      id: 2,
      code: '#0000FF'
    }, {
      name: '#ADD8E6',
      id: 3,
      code: '#ADD8E6'
    }, {
      name: '#A52A2A',
      id: 4,
      code: '#A52A2A'
    }, {
      name: '#00FFFF',
      id: 5,
      code: '#00FFFF'
    }, {
      name: '#E0FFFF',
      id: 6,
      code: '#E0FFFF'
    }, {
      name: '#2F4F4F',
      id: 7,
      code: '#2F4F4F'
    }];
    $scope.selectedColor = '#000000';

   ...