Error in LInking service and directive in Angular - angularjs

Question

I have an issue at linking service having http to a directive. This is the code of that...
myapp.factory ( 'autoCompleteDataService', ['$http', function($http) {
return {
getSource: function(callback) {
var url = 'get_data_from_server.php';
$http.get(url).success(function(data) {
callback(data);
});
}
}
} ] );
myapp.directive('autoComplete', function(autoCompleteDataService) {
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
elem.autocomplete({
source: autoCompleteDataService.getSource(),
select: function( event, ui ) {
scope.$apply(function() {
scope.item.unit_id = ui.item.value;
});
},
minLength: 2
});
}
};
});
I replaced callback(data); with return data; with no result...
Any help is appreciated..
Edit: added working code without http
If I keep this code instead the above one its working
myapp.factory('autoCompleteDataService', [function() {
return {
getSource: function() {
return ['apples', 'oranges', 'bananas'];
}
}
}]);

Answer 1

Another way to answer the issue,, with full filtering logic at server side..
myapp.directive('autoComplete', function(autoCompleteDataService) {
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
elem.autocomplete({
source: function( request, response ) {
$.ajax({
url: "./get_data_from_server.php",
dataType: "json",
data: {
maxRows: 10,
startsWith: request.term
},
success: function( data ) {
response(data);
}
});
},
select: function( event, ui ) {
scope.$apply(function() { scope.item.unit_id = ui.item.value; });
},
minLength: 2
});
}
};
});

Answer 2

myapp.factory('autoCompleteDataService', ['$http', function($http) {
return {
getSource: function() {
var url = 'get_data_from_server.php';
return $http.get(url);
}
}
}]);
Directive:
link : function(scope, elem, attr, ctrl) {
autoCompleteDataService.getSource().success(function(data) {
elem.autocomplete({
source: data,
select: function( event, ui ) {
scope.$apply(function() { scope.item.unit_id = ui.item.value; });
},
change: function (event, ui) {
if (ui.item === null) {
scope.$apply(function() { scope.foo = null });
}
},
minLength: 2
});
});
}