JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app='myApp' ng-controller="Controller">
    <drop-down></drop-down>
    <br> <br> <br> <br> <br> <br>
    <drop-down></drop-down>
</div>

CSS

.ngSelect {
    font-family:Arial, Helvetica, Sans-Serif;
    font-size:0.75em;
    color:#000;
}
.desc {
    color:#6b6b6b;
}
.desc a {
    color:#000000;
}
.ngSelect dd, .ngSelect dt, .ngSelect ul {
    margin:0px;
    padding:0px;
}
.ngSelect dd {
    position:relative;
}
.ngSelect a, .ngSelect a:visited {
    text-decoration:none;
    outline:none;
}
.ngSelect a:hover {
    color:#ffffff;
}
.ngSelect dt a:hover {
    color:#000000;
    border: 1px solid #9B9B9C
}
.ngSelect dt a {
    color: #000000;
    background-image: url(data:image/png;
    base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAAAZQTFRFAAAAAAAApWe5zwAAAAF0Uk5TAEDm2GYAAAAcSURBVAjXY2BABfIfQIj/AQP7AQbmBgZGNGkGAHE3BFlmUXkHAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-position: right center;
    display:block;
    padding-right:20px;
    border:1px solid #CDCDCD;
    width:150px;
}
.ngSelect dt a span {
    cursor:pointer;
    display:block;
    padding:5px;
}
.ngSelect dd ul {
    background:#ffffff none repeat scroll 0 0;
    border:1px solid #CDCDCD;
    color:#CDCDCD;
    display:none;
    left:0px;
    padding:5px 0px;
    position:absolute;
    top:0px;
    width:auto;
    min-width:170px;
    list-style:none;
}
.ngSelect span.value {
    display:none;
}
.ngSelect dd ul li a {
    padding:5px;
    display:block;
    color: #000000;
}
.ngSelect dd ul li a:hover {
    background-color:#27A1EC;
}
.ngSelect img.flag {
    border:none;
    vertical-align:middle;
    margin-left:10px;
}
.flagvisibility {
    display:none;
}

JavaScript

var app = angular.module('myApp', []);
app.controller('Controller', function ($scope) {

});

app.directive('dropDown', function ($parse, $document) {
    return {
        restrict: 'E',
        require: ['?ngModel'],
        template: "<dl class='ngSelect'> <dt><a href='#' ng-click='toggleOptions()'><span>{{selectedLabel}}<span class='value'>{{selectedValue}}</span></span></a></dt>" +
            "<dd>" +
            "<ul ng-style='isOptionVisible'>" +
            "<li><a href='#' ng-click='getValue(\"Please select the country\",\"?\")'>Please select the country<span class='value'>?</span></a>" +
            "</li>" +
            "<li><a href='#' ng-click='getValue(\"Brazil\",\"BR\")'>Brazil<span class='value'>BR</span></a>" +
            "</li>" +
            "<li><a href='#' ng-click='getValue(\"France\",\"FR\")'>France<span class='value'>FR</span></a>" +
            "</li>" +
            "</ul>" +
            "</dd>" +
            "</dl> <span id='result'></span>",
        link: function (scope, element, attr, ctrl) {
            scope.isOptionVisible = {
                'display': 'none'
            };

            angular.element(document.querySelector('.ngSelect img.image')).addClass("flagvisibility");

            scope.toggleOptions = function () {
                scope.isOptionVisible.display = (scope.isOptionVisible.display === 'none' ? 'block' : 'none');
                               
                $document.on("click", scope.onClick);
            };

            scope.getValue = function (label, value) {
                scope.selectedLabel = label;
                scope.selectedValue = value;
            };
            scope.getValue("Please select the country", "?");

            scope.onClick = function (event) {
                    if (scope.isOptionVisible.display !== 'none') {
                    scope.isOptionVisible.display = 'none';
                    return;
                }
                scope.$apply(attr.clickAnywhereButHere)
      ...