Autocomplete with directive stacking

directive.js

autocomplete.directive('typeahead', ['$compile', 'AutocompleteService', function ($compile, AutocompleteService) {
    return {
        restrict:   'A',
        priority:   999,
        link:  function ($scope, elm, attrs) {
            $scope.getItems = function (filter, type, autocompletItems) {
                var fn = AutocompleteService.getLookupFunction(type, autocompletItems);
                return fn(filter);
            }
        }
    };
}]);

template.html

Selected: <span ng-bind="loc"></span>
<input name="city" typeahead="item for item in getItems($viewValue,'cities')" typeahead-min-length="3"  ng-model="loc" />

Another Selected: <span ng-bind="loc2"></span> 
<input name="city2" typeahead="item for item in getItems($viewValue,'cities')" typeahead-min-length="3"  ng-model="loc2" />

Simple complete:  <span ng-bind="loc3"></span> 
<input name="city3" typeahead="item for item in getItems($viewValue, 'simple', 'Berlin,Dresden,rest of the world')" ng-model="loc3" />