angularjs - Angular typeahead response error -

i implementing input allow select multiple values tags. working angular-ui-bootstrap-typeahead

the following example dummy data works fine:

view:

<script type="text/ng-template" id="form_field_ref">  <div class='container-fluid' ng-controller="typeheadtestctrl">      <input type="text" ng-model="selected"  typeahead="x.formatted_address x in dynamicsearch($viewvalue, field.displayname)"  class="form-control" typeahead-on-select='onselect($item, field)'>  </div> </script> 

part of controller:

        $scope.getlocation = function(val) {           return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {             params: {               address: val,               sensor: false             }           }).then(function(response){             console.log(response);             return response.data.results.map(function(item){               console.log(item);               //items attribute=> address_components, formatted_address, place_id....               return item;              });           });         }; 

but when try connect actual data following error:

typeerror: cannot read property 'length' of undefined @ ui-bootstrap-tpls.js:3637 @ processqueue (angular.js:13170) @ angular.js:13186 @ scope.$eval (angular.js:14383) @ scope.$digest (angular.js:14199) @ scope.$apply (angular.js:14488) @ $$debounceviewvaluecommit (angular.js:20944) @ $setviewvalue (angular.js:20916) @ htmlinputelement.listener (angular.js:19632) @ htmlinputelement.eventhandler (angular.js:3011) 

here code fails:

view:

 <input type="text" ng-model="selected"  typeahead="x.theval x in dynamicsearch($viewvalue, field.displayname)"  class="form-control" typeahead-on-select='onselect($item, field)'> 

the parts of controller:

dynamicsearch() prepares data request on call of getdbrefdocs():

        $scope.dynamicsearch = function(searchterm, name) {           var allowed = {};           var classstring = "";           allowed = datamodel.classes[$routeparams.class].attribute[name].allowed;           (key in allowed){             classstring = classstring +  key + "|";           }           //remove last pipeline           classstring = classstring.slice(0, -1);           $scope.getdbrefdocs(searchterm, name, classstring);         };          $scope.getdbrefdocs = function(searchterm, name, classstring) {           var url = '/api/v2/docs/' + classstring;           return $http.get(url, {             params: {               '>displayname': searchterm,               count: 5                                   }           }).then(function(response){             var data = response.data.data;             console.log('data:'+data);             var requested = [];             angular.foreach(data.requested, function(searchterm, k, o) {                requested.push(createdboifnecessary(searchterm));             });             $scope.item=[];             $scope.options=[];             $scope.options[name] = [];             (key in requested) {               if (requested.hasownproperty(key)) {                 //this storing value                 //console.log(requested[key].cid);                 //this display value                 //console.log(requested[key].attributes.displayname[0]);                 $scope.options[name][key] = requested[key].attributes.displayname[0];                 $scope.item.push({                   'thename':requested[key].attributes.displayname[0],                    'theval':requested[key].cid                 });                }              }                console.log('item:'+$scope.item);             return $scope.item;            });         }; 

this last console.log returns required data correctly!

for have been able read problem related promise of server request... stuck!

i not sure failing because receiving expected data.

i think mentioned related manipulation of response, delaying it...

in stead added event trigger updates array typeahead attribute reads , works fine. typeahead-wait-ms required cause server response between 20 , 30ms safe set 200ms.

working code:

view: displays values of array "item"(item.thename == x.thename)

  <input type="text" ng-model="selected"  typeahead="x.thename x in item" ng-change="dynamicsearch($viewvalue, field.displayname)" typeahead-wait-ms="1000"  class="form-control" typeahead-on-select='onselect($item, field)'> 

controller functions:

on ng-change ->dynamicsearch() =>define data request , call request

$scope.dynamicsearch = function(searchterm, name) {   var allowed = {};   var classstring = "";   allowed = datamodel.classes[$routeparams.class].attribute[name].allowed;   (key in allowed){     classstring = classstring +  key + "|";   }   classstring = classstring.slice(0, -1);   $scope.getdbrefdocs(searchterm, name, classstring); }; 

on call of getdbrefdocs() => define values array "item"

$scope.getdbrefdocs = function(searchterm, name, classstring) {   var url = '/api/v2/docs/' + classstring;   $http.get(url, {     params: {       '>displayname': searchterm,       count: 5                           }   }).then(function(response){     var data = response.data.data;     var requested = [];     angular.foreach(data.requested, function(searchterm, k, o) {        requested.push(createdboifnecessary(searchterm));     });     $scope.item=[];     (key in requested) {       if (requested.hasownproperty(key)) {         $scope.item.push({           'thename':requested[key].attributes.displayname[0],            'theval':requested[key].cid         });        }      }      }); }; 

when item selected available options of "item" => typeahead-on-select='onselect($item, field)' => store item.theval:

    $scope.onselect = function (item, field) {       field.thevalues[field.thevalues.length] = item.theval;     };