Gidon Gidon - 1 year ago 262
AngularJS Question

Angularjs autocomplete from $http

I'm trying to write an autocomplete directive that fetches data from the server using an $http request (without using any external plugins or scripts). Currently it works only with static data. Now, I know that I need to insert my $http request into the

of the directive, but I can't find any good documentation on the subject.

http request

$$scope.url, { "command": "list category() names"}).
success(function(data, status) {
$scope.status = status;
$scope.names = data;
error(function(data, status) {
$ = data || "Request failed";
$scope.status = status;


app.directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
}, 0);


<input auto-complete ui-items="names" ng-init="manualcat='no category entered'" ng-model="manualcat">

So, how do I piece this all together correctly the Angular way?

Answer Source

I made an autocomplete directive and uploaded it to GitHub. It should also be able to handle data from an HTTP-Request.

Here's the demo: And here the documentation and repository:

So basically you have to return a promise when you want to get data from an HTTP request, that gets resolved when the data is loaded. Therefore you have to inject the $qservice/directive/controller where you issue your HTTP Request.


function getMyHttpData(){
  var deferred = $q.defer();
    // the promise gets resolved with the data from HTTP
  // return the promise
  return deferred.promise;

I hope this helps.