autocomplete

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div class="container" ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <div class="auto-complete" auto-complete>
             <input class="auto-complete"  ui-items="names">
        </div>     
    </div>
</div>

CSS

.container {
    margin :15px;
}

.auto-complete {
    position: relative;
}
input.auto-complete {
    outline-width: 0;
     background:url(http://i.imgur.com/z7ZSYjt.png) no-repeat right 10px center;
}
input.auto-complete:hover {
     cursor:pointer;
}

JavaScript

function DefaultCtrl($scope) {
    $scope.names = ["123456789", "1", "2", "3", "4", "5", "6", "7", "qwertyui" ,"poiuyt", "lkjhgf" , "fdsazx", "cvbnm"];
}

angular.module('MyModule', []).directive('autoComplete', function($timeout) {
    return function(scope, element, attrs) {
        //debugger
            var el = element.find('input');
            el.autocomplete({
                source: scope.names,
                select: function() {
                    $timeout(function() {
                      el.trigger('input');
                    }, 0);
                }
            });
    };
});