Angular Example: jqui 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/angular-1.0.0rc4.js"></script>
<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <input auto-complete ui-items="names" ng-model="selected">
        selected = {{selected}}
    </div>
</div>

JavaScript

function DefaultCtrl($scope) {
    //I create an items var in the scope the idea is to end filling this var asynchronosly
    //via $resources
    $scope.names = ["john", "Bill", "Charlie"];
}

angular.module('MyModule', []).directive('autoComplete', function() {
    return function(scope, iElement, iAttrs) {
    
        scope.$watch(iAttrs.uiItems, function(values) {
        	debugger
            iElement.autocomplete({
                source: values,
                select: function() {
                    setTimeout(function() {
                      iElement.trigger('input');
                    },0);
                }
            });
                
        }, true);
    };
});