AngularJS directive with jQuery UI - template and element

I'm trying to create an angularJS directive of auto-complete text input using jQuery UI autoComplete plugin.

This my angular code:

<script type="text/javascript">
        angular.module('components', []).
            directive('autoComplete', function () {
                return {
                    restrict: 'E',
                    template: '<input type="text" id="tags" name="tags" maxlength="80" />',
                    link: function (scope, element, attrs) {
                        var dataUrl = '@Url.Action("GetTags", "Home")';
                        element.autocomplete({
                            source: function (term, responseCallBack) {
                                $.get(dataUrl + '?term=' + term.term, function (data) {
                                    responseCallBack(data);
                                });
                            },
                            minLength: 2,
                            select: function (event, ui) {
                                alert(ui.item.label);
                            }
                        });
                    }
                };
            });

        angular.module('JqueryApp', ['components']);
    </script>

This is my html code:

<div ng-app="JqueryApp">
    <div>
        <div>
            <auto-complete />
        </div>
    </div>
</div>

It's not working because I need to work on the template element rather then the <auto-complete> directive tag element so I can apply the autoComplete plugin on it, I found out that the returned element(in the link callback function) is the <auto-complete> directive and not the given template(<input>) which I can apply the jquey plugin on.

How can I apply the autoComplate plugin on the template(input)?

Thank you