Angular: autocomplete directive

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc2.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div ng-controller="MyCtrl">
    <div>jQuery UI integration in AngularJS : creation autocomplete tag</div>
    <div>to test, start by typing a word from availableTags Array</div>
    <div>selection is ? {{name}}</div>
    <div><autocomplete list="availableTags" selection="Asp"/></div>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('autocomplete', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<input name="autocomplete" type="text"/>',
        link: function(scope, element, attrs) {
            scope.$watch(attrs.list, function(value) {
                element.autocomplete({
                    source: value,
                    select: function(event, ui) {
                        scope[attrs.selection] = ui.item.value;
                        scope.$apply();
                    }
                });
            });
        }
    };
});

//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = '';
    $scope.availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
        ];
}