How develop angular autocomplete text box using bootstrap typeahead

In this tutorial, we will learn how to develop autocomplete text box using angular and bootstrap.

Steps involved in this tutorial: 
1) Registering the required scripts in bundle config.
2) Creating app.js for angularjs which will fetch the autocomplete list
3) Render Scripts in view
4) Binding autocomplete list data in view
5) Display the page

To develop angular bootstrap typeahead with your service returning JSON data,You need to register below scripts in bundle config:

jquery.js
bootstrap.js
angular.js
ui-bootstrap-tpls-0.14.3.js

In your bundle config register above files:

        bundles.Add(new ScriptBundle("~/bundles/cdnjquery").Include("~/Scripts/jquery2.1.4.js"));
        bundles.Add(new ScriptBundle("~/bundles/cdnbootstrapjs").Include("~/Scripts/bootstrap.min.js"));
        bundles.Add(new ScriptBundle("~/bundles/cdnangularjs").Include("~/Scripts/angular1.4.5.js"));
        bundles.Add(new ScriptBundle("~/bundles/cdnangularresourcejs").Include("~/Scripts/angular-resource.js"));
        bundles.Add(new ScriptBundle("~/bundles/appjs").Include("~/Scripts/app.js"));

        bundles.Add(new ScriptBundle("~/bundles/angularbootstrapjs").Include("~/Scripts/ui-bootstrap-tpls-0.14.3.js"));
        bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include("~/Content/bootstrap.css"));

In your view, render scripts and css files:

@Styles.Render("~/Content/bootstrapcss")
@Scripts.Render("~/bundles/cdnjquery")
@Scripts.Render("~/bundles/cdnbootstrapjs")
@Scripts.Render("~/bundles/cdnangularjs")
@Scripts.Render("~/bundles/angularbootstrapjs")
@Scripts.Render("~/bundles/appjs")

In view page add below code which will accept the string, then will pass it to controller, then it will get the list of items matching this string and will display in typeahead box.

<h4>Get Quote</h4>
<pre>Model: {{selected | json}}</pre>
<input type="text" ng-model="selected" uib-typeahead="stock.NAME_OF_COMPANY for stock in stocks | filter:$viewValue | limitTo:8" class="form-control">

Now write below code in app.js file, which will call the controller method and will get the list of items which are matching the string.

var StockMarketApp = angular.module("StockMarketApp", ["ngResource", "ui.bootstrap"]);

StockMarketApp.controller('StockController', function ($scope, $http) {
  $scope.stocks = undefined;

   $scope.fnGetQuoteDataForAutoComplete = function () {
    //$scope.getQuote = 'dhfl';
    $http.get("/EquityList/GetStockNamesForAutoComplete")
            .success(function (data, status, headers, config) {
                $scope.stocks = angular.fromJson(data)
            })
        .error(function (data, status, headers, config) {
        });
  };
});

JSON contains below data:
1) data.SYMBOL
2) data.NAME_OF_COMPANY

So to display data.NAME_OF_COMPANY we have to write
uib-typeahead="stock.NAME_OF_COMPANY 

Congrats you have created a typeahead using angularjs and bootstrap.
 I hope this helps.