Angular typeahead : watch for dataset change

Question

I am using Siyfion's typeahead directive in my project.

What I do in my controller is something like this :

$http({method: 'GET', 'url': CONFIG.SOMEURL})                             
    .success(function(data, status, headers , config){                       
    if(status==200)                                                          
    {                                                                        
        $scope.objects = data;                                                
        for(i=0; i < $scope.objects.length; i++){                             
            $scope.allObjects.push($scope.objects[i].name);  
        }                                                                    
        console.log($scope.allObjects);                                       

$scope.dataSet = {                                                           
    name : 'objs',                                                         
    local : $scope.allObjects                                                                                                             
};

I get an array of 'objects' as json from django view. But the problem is in my HTML template:

<input type="text" class='sfTypeahead' datasets='dataSet' ng-model='testname' />

Since the dataSet initially is empty while the async call is being made I get an error :

TypeError: Cannot read property 'name' of undefined

Is there a way if I can look for changes in dataSet or datasets so that as soon as the array allObjects gets populated,The DOM gets refreshed maybe ?

Can anyone suggest what could be done here

Just use http://angular-ui.github.io/bootstrap/#/typeahead instead which works nativelly with promises as described here: http://stackoverflow.com/a/15930592/1418796 — pkozlowski.opensource, Oct 29 '13 at 10:30
@pkozlowski.opensource. Thanks for the resource.Is there a good read which can help me understand how promises work with directives ? I mean how should I write my directive so that It takes functions which return promises, as its input ? — Deepankar Bajpeyi, Oct 30 '13 at 07:46

score 1 · Accepted Answer · answered Aug 13 '14 at 13:15

Full disclosure: I'm the author of the aforementioned directive.

Essentially, you are trying to do all the prefetching in Angular itself, when Typeahead.js & Bloodhound are designed specifically to do this for you. Take a good look at https://twitter.github.io/typeahead.js/examples/ and pay particular attention to the Bloodhound suggestion engine.

Perhaps of some use:

NOTE: The version of the directive you were using (9 months ago) didn't support updating the dataset local variable, but it now does, so you could do it that way, if you liked.

Angular typeahead : watch for dataset change

1 Answers1

Linked