JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/ng-template" id="angular-combo-template.html">
        <div class="combo-wrapper">
            <input type="text" ng-focus="showList = true" ng-blur="showList = false"/>
            <ul ng-show="showList">
                <li ng-repeat="item in items">{{item.name}}</li>
            </ul>
        </div>
    </script>
    
    <body ng-app="angularApp" ng-controller="CityController">
        <angular-combo id="city" items="cities"></angular-combo>
    </body>

CSS

.combo-menu{
            position: relative;
            display: none;
        }

JavaScript

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

        angularApp.controller('CityController', function ($scope) {

            $scope.name = "test";
            $scope.cities = [
                {
                    'name': 'Istanbul',
                    'value': 34
                },
                {
                    'name': 'Izmir',
                    'value': 35
                },
                {
                    'name': 'Amasya',
                    'value': 3
                },
                {
                    'name': 'Balikesir',
                    'value': 14
                },
                {
                    name: 'Bursa',
                    value: '16'
                }
            ];
        });

        angularApp.directive("angularCombo", function () {
            return {
                restrict : 'E',
                scope: {
                    items: '=',
                    id : '@'
                },
                templateUrl : 'angular-combo-template.html'
            }
        });