Why <div> wrapping necessary in my AngularJS directive for Jquery UI autocomplete widget?

Recently I tried to write a AngularJS directive to use with Jquery UI autocomplete widget. The directive is used this way:

<input type="text" auto-comp ng-model="lan" />

It is supposed to function as as autocomplete widget, and stored the selected item to a model, $scope.lan.

Finally I was successful, but find that I have to put a "div" tag wrapping the "input" tag, i.e.,

<div><input type="text" auto-comp ng-model="lang" /></div>

Without the "div" wrapping, Chrome will report an error: TypeError: Cannot set property 'nodeValue' of undefined

The libraries used are: jquery 1.8.3 jquery UI 1.9.2 angularjs 1.0.3

I uploaded the code in jsfiddle http://jsfiddle.net/QSBvh/23/ You can remove the div, and see the result.

Below is the directive:

angular.module('myApp', []).
directive('autoComp', function () {
       return function(scope, element, attrs) {
                $(element).autocomplete({
                    source: scope.availableTags,
                    select: function(event, ui) {
                        scope.lan = ui.item.value;
                        scope.$apply();
                    }
                });
        }
});

New finding. When I put .autocomplete inside a

scope.$watch("availableTags", function(value) {});

suddenly, the "div" wrapping is not needed. Very strange.

angular.module('myApp', []).
directive('autoComp', function () {
       return function(scope, element, attrs) {
            scope.$watch("availableTags", function(value) {
                $(element).autocomplete({
                    source: scope.availableTags,
                    select: function(event, ui) {
                        scope.lan = ui.item.value;
                        scope.$apply();
                    }
                });
            });
        }
});