JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-resource.min.js"></script>
<link rel="stylesheet" href="http://angular-ui.github.com/lib/bootstrap/docs/assets/css/bootstrap.css">
<div lang="en" ng-app="demoApp" ng-controller="MainCtrl">  
    <my-autocomplete remote-data="Wrapper.AutoComplete(request, response)" 
            min-input="2" restrict="true" 
            selected-item="selectedItem" 
            placeholder="Type City Name">
    </my-autocomplete><br/>
    Controller Level:{{selectedItem}}
</div>

JavaScript

var demoApp = angular.module('demoApp', ['ngResource'], function($locationProvider) {
    $locationProvider.hashPrefix('');
});
demoApp.factory('Serv', function($http, $resource) {
    return {
        AutoComplete: function(request, response) {
            console.log('AutoComplete called:' + request.term);
            var retArray, dataToPost;
            console.log('Term:' + request.term);
            dataToPost = {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term,
                callback: 'JSON_CALLBACK'
            };
            config = {
                method: 'JSONP',
                url: 'http://ws.geonames.org/searchJSON',
                params: dataToPost
            };
            $http.jsonp(config.url, config).
            success(function(data, status, headers, config) {
                //console.log(data.geonames);
                retArray = data.geonames.map(function(item) {
                    return {
                        label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                        value: item.name
                    }
                });
                response(retArray);
            }).
            error(function(data, status, headers, config) {
                response([]);
            });

        }
    }
});

function MainCtrl($scope, Serv) {
    $scope.selectedItem = {
        value: 0,
        label: ''
    };
    $scope.Wrapper = Serv;    
}
demoApp.directive('myAutocomplete', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            minInputLength: '@minInput',
            remoteData: '&',
            placeholder: '@placeholder',
            restrictCombo: '@restrict',
            selectedItem: '=selectedItem'
        },
        template: '<div class="dropdown search" ' + 
        '     ng-class="{open: focused && _choices.length>0}">' +...