Hi,

I was using jquery autocomplete functionality in angularJs using directive. Whenever I tried to load static data it was working fine, but when I loaded data from server side the first click was not working. 

I was using code something like:

$("#suggestion").autocomplete({ source: $scope.data });

where $scope.data contains the data from server. After doing lot of search i found the issue. When using angular values cannot be assign like this, it should be assigned as a key value pair, like:

value: item.key+"; "+item.value

Complete code:

app.directive('autoComplete', ['$http', function($http) {
  var data = [];
  return function (scope, element, attrs) {
    element.autocomplete({
      minLength:1,
      source:function (request, response) {
        data = [];
        var url = '/source/getData/'+searchKey;
        $http.get(url).success( function(data) {         
         response($.map(data.city, function(item) {
            return {
              value: item.key+"; "+item.value
            };
          }));
        });
      }
    });
  }
}]);

Here minLength decides after which number of character autocomplete will start appearing.