//HTML template:
<input type="text" class="form-control" data-autocomplete="" data-source="/api/GetDestinations/" data-ng-model="destination" placeholder="Inserisci una destinazione..." value="" />

//directive:
Shared.directive('autocomplete', function () {
    return {
        require: '^ngModel',
        restrict: 'A',
        scope: {
            ngModel: '='
        },
        link: function (scope, elem, attr, ctrl) {
            var options = {
                source: attr.source,
                minLength: 2,
                delay: 300,
                select: function (event, ui) {
                    $(event.target).val(ui.item.label);
                    scope.$apply(function () {
                        scope.ngModel = { label: ui.item.label, value: ui.item.value };
                    });
                    return false;
                }
                , create: function (event, ui) {
                    if (scope.ngModel)
                        $(event.target).val(scope.ngModel.label);
                    return false;
                }
                , focus: function (event, ui) {
                    if (scope.destination)
                        $(event.target).val(scope.ngModel.label);
                    return false;
                }
            };
            elem.autocomplete(options);
        }
    };
});

//main controller:
function searchResultController($scope, $http, $routeParams, $location, suggerimentiData, suggerimentiDataService) {
    destination={};
};
searchResultController.$inject = ['$scope', '$http', '$routeParams', '$location', 'suggerimentiData', 'suggerimentiDataService'];