How to develop autocomplete textbox in AngularJS and MVC4. I'm new to AngularJS

Question

My Scenario: My MVC controller is returning JSON data which is array of string

I tried all the possible solutions like twitter bootstrap typeahed for angular but nothing

Answer 1

Finally I was able to develop angular autocomplete text box using bootstrap typeahead.

To develop angular bootstrap typeahead with your service returning JSON data below are the steps: You need to register:
jquery.js
bootstrap.js
angular.js

And to use bootstrap you need to add angular bootstrap dependency javascript file:
ui-bootstrap-tpls-0.14.3.js

In your bundle config register below 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 cshtml file add below code:

Render scripts and css in your shared or respective .cshml file:

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

Write below code in your respective cshtml file:

Get Quote
Model: {{selected | json}}

Now write below code in your app.js file:

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) {
        });
  };
});

My JSON data contains:
data.SYMBOL
data.NAME_OF_COMPANY

I want to display data.NAME_OF_COMPANY, so if you check in chtml code, I have written:
uib-typeahead="stock.NAME_OF_COMPANY for stock in stocks.

In this way you can create a typeahead using angularjs and bootstrap.

Hope this helps someone who is stumbled upon this like me.