Preety Singh Preety Singh - 1 year ago 60
Javascript Question

Typeahead fetch data from url json value not working

Hi below is my html code for angular typeahead:

<div class="form-group">
<select name="" class="form-control" ng-model="city" ng-change="onChange(e)" id="city">
<option value="DELHI">DELHI</option>
<option value="BANGALORE">BANGALORE</option>
<option value="GOA">GOA</option>
<option value="KOLKATA">KOLKATA</option>
<option value="PUNJAB">PUNJAB</option>

<input type="search" name="" ng-model="bankName" typeahead='bank_name as bankName | filter:$viewValue | limitTo:8' id="input" class="form-control" value="" placeholder="Search" required="required" title="">

<table class="table table-hover">
<th>BANK ID</th>
<th>BANK NAME</th>
<tr ng-repeat="service in services">

Below is JS File:

var app = angular.module('bankBranch', ['ui.bootstrap'])

.controller('ServicesCtrl', ['$scope', '$http', function($scope, $http){
$scope.bankUrl = "";
var bankName = '$scope.bank_name';
var cities = '$';
$scope.getdata = function(){
$ =;

$scope.onChange = function(e){

The problem is I am trying to fetch the branch name in the input field and as I type the below table data should get filtered according to that. The onChange function is working for select box. The json format of the api url is as follows:

"ifsc": "asdads",
"bank_id": 110,
"bank_name": "abc bank",
"branch": "BANGALORE",
"address": "ewrwerewr",
"city": "BANGALORE",
"district": "BANGALORE URBAN",
"state": "KARNATAKA"

Any Idea how to modify this? Getting stuck.Please help me....

Answer Source

You have mistaken while using typeahead directive, the way it works is, it will need a promise object on which you will apply $viewValue filter

<input type="search" name="" ng-model="bankName" 
   typeahead='bank_name for bankName in getdata()'
   id="input" class="form-control" value="" 
   placeholder="Search" required="required" title=""/>

So lets change your $scope.getData function to return promise object from it.

$scope.getdata = function(){
    return $http.get($scope.bankUrl+${
        $ =;
        return $;

$scope.onChange = function(e){
    return $scope.getdata();

Note: If you are using Angular ui-bootstrap version 1.X+ then you have to use uib- prefix before each ui-bootstrap directive like in your case it would be uib-typeahead instead of typeahead.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download