JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<div ng-controller="dropCtrl">
    {{selected}}
<drop-select items="items" ng-model="selected.name" placeholder="pick a country"></drop-select>
<drop-select items="items" ng-model="selected.code" placeholder="pick a country"></drop-select>
    <input type="text" ng-model="selected.code" placeholder="code">
 </div>

JavaScript

var myApp = angular.module('directiveInput',[]);
myApp.controller("dropCtrl",function($scope){

    $scope.selected = {};
    $scope.items = [ 
{"name": "Afghanistan", "code": "AF"}, 
{"name": "Ă…land Islands", "code": "AX"}, 
{"name": "Albania", "code": "AL"}, 
{"name": "Algeria", "code": "DZ"}, 
{"name": "American Samoa", "code": "AS"}, 
{"name": "AndorrA", "code": "AD"}, 
{"name": "Angola", "code": "AO"}, 
{"name": "Anguilla", "code": "AI"}, 
{"name": "Antarctica", "code": "AQ"}]

});

myApp.directive("dropSelect",function(){

    return{
    		restrict:'E',
        	scope : {
            	items : '=items',
                selected:'=ngModel'
            },
        	template:'<input type="text" ng-model="selected.name" placeholder="country">'+'<ul><li ng-repeat="item in items" ng-click="selectedCountry(item)">{{item.name}}<li></ul>',
           link : function(){
     
           },
        	controller:function($scope){
            $scope.selectedCountry = function (item){
                console.log(item);
            	$scope.selected = item.name
            
            }
            
            }
          
    
    
    }

})