title: How to use typeahead in angularjs?
body: <p>I am trying to do autocomplete in which data is taken from url .I have written a code but its displaying undefined .Can anyone help me out to solve this problem </p>
  
  <pre><code>//html file
  &lt;!DOCTYPE html&gt;
  &lt;html ng-app="myapp"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Autocomplete using remote searching&lt;/title&gt;
  
  &lt;script src="angularfiles/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="angularfiles/angular-animate.js"&gt;&lt;/script&gt;
  &lt;script src="angularfiles/ui-bootstrap-tpls-0.13.4.js"&gt;&lt;/script&gt;
  &lt;link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"&gt;
  &lt;script src="Jsfiles/autourl.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="controller"&gt;
      &lt;div class="ui-widget"&gt;
          &lt;input type="text" ng-model="asyncselected" typeahead="r.city for r in getlist($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults"&gt;
          &lt;i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"&gt;&lt;/i&gt;
          &lt;div ng-show="noResults"&gt;
          &lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt; No Results Found
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  //Js file
  
  var app=angular.module("myapp",['ui.bootstrap']);
  app.controller("controller",['$scope','$http',function($scope,$http){
      $scope.getlist=function(val){
          return $http.get("http://www.w3schools.com/angular/customers.php").then(function(response){
              return response.data.results.map(function(item){
                  return item.City;
              });
          });
      };
  }]);
  </code></pre>
  
  <p>May be the jsfile code is some what wrong..I am unable to identify.Can anyone help me to solve .</p>