AngularUI, location loaded via $http -> Timeout error

Hello together,

I want to make use of the angularUi integration Typeaehad. Here is the reference im refering to: Angular directives for Bootstrap

And here is the working Plnkr: Plunker -

That the code is working in Camunda I changed it a little bit:

<div ng-controller="TypeaheadCtrl">

    <h4>Asynchronous results</h4>
    <pre>Model: {{asyncSelected | json}}</pre>
    <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
    <div ng-show="noResults">
        <i class="glyphicon glyphicon-remove"></i>No Results Found


        function TypeaheadCtrl($scope, $http) {

            $scope.selected = undefined;
            $scope.getLocation = function (val) {
                return $http.get('//', {
                    params: {
                        address: val,
                        sensor: false
                }).then(function (response) {
                    return (item) {
                        return item.formatted_address;

I tink the code is working however I always get this error:

Request Timeout : Your request timed out. Try to refresh the page.

Is there some magic I have to add to the code so it is able to get the location from Google API?



Hi Marc,

could you check if the request is send correctly? You can do that by opening the developer console (F12 in most browsers) and go to the Network tab. If you then reload the page, you will see all requests this page is making. Make sure that your request to googleapis appears there and gets a response.


Hey Sebastian,

I dont think it is seding it correctly. I took 2 print screens from the network tab in the console.

The first printscreen shows the log when i start the process and the second one is after i have entered some letter in the input field.

Do you have any suggestion for that problem?

Cheers Marc



Hi Marc,

I was able to reproduce your issue and raised a bug report:

If you do not use the angular $http service to make the request against the external resource, it should work. Try to inject $q in your Controller and replace the content of your getLocation function with this snippet:

var deferred = $q.defer();

var req = new XMLHttpRequest();
req.addEventListener('load', function(response) {
  var data = JSON.parse(;
  deferred.resolve( (item) {
      return item.formatted_address;
});'GET', ''+val+'&sensor=false');

return deferred.promise;

Does this work for you?


1 Like

Thank you, it works perfect for me :+1: