typeahead not able to fetch data from api angularjs

Question

this is my html code

<input type="text" ng-model="ngModelOptionsSelected" 
 placeholder="Enter Story Title"
 ng-model-options="modelOptions" 
 ng-change="onChangeFunction()"
 typeahead-on-select="typeaheadOnSelectFunction()"
 uib-typeahead="document as document.Name for document in getStory($viewValue)" 
 class="form-control">

this is my .js code

$scope.getStory = function (val) {
storyService.GetStoryByName(cacheService.project.projectId,val).success(function (data) {
                if (data.ResponseStatus) {
               debugger;
                    return  data.ResponseData;
                } else {
                    //On failure
                    toastr.error(data.ErrorData.Error);
                }
            });
        };

function output which returns data like ResponseData =

[{"Id":211380.0,"Name":"dixit"},{"Id":211488.0,"Name":"dixit ade"},{"Id":251541.0,"Name":"dixit"},{"Id":842671.0,"Name":"dixit"},{"Id":842672.0,"Name":"dixit choksi"}]

but i am not able to bind data in typeahead.

please help me i am stuck. thanks

Answer 1

Your function $scope.getStory() doesn't actually return anything, your return line return data.ResponseData; is nested within another function.

The uib-typeahead directive is able to work with promises so you just need to return the promise from your function.

$scope.getStory = function (val)
{
    return storyService.GetStoryByName(cacheService.project.projectId, val).success(function (data)
    {
        if (data.ResponseStatus)
            return data.ResponseData;

        toastr.error(data.ErrorData.Error);

        return [];
    });
};

You can also add another property to the directive, typeahead-loading="isLoading" , that will toggle whilst the promise resolves. It can be used to show/hide loading spinners for example!