<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<alert type="'info'" >Typeahead from <a href="http://angular-ui.github.com/bootstrap/">http://angular-ui.github.com/bootstrap/</a>"</alert>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{result | json}}</pre>
<input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
</div>
<hr>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<input type="text" ng-model="selected" typeahead="suggestion.name for suggestion in cities($viewValue) track by suggestion.id"
typeaheadLoading='loadingArgs'>
<pre>LoadingArgs: {{loadingArgs| json}}</pre>
</div>
</body>
</html>
angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope, $http, $timeout, limitToFilter) {
//http://www.geobytes.com/free-ajax-cities-jsonp-api.htm
$scope.loadingArgs = false
$scope.cities = function(cityName) {
consoel.log(cityName);
return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q="+cityName)
.then(function(response){
var data = angular.copy(response.data);
var i;
console.log(data);
for(i=0; i < data.length; ++i) {
data[i] = {'id': i, 'name': data[i]}
}
return data;
})
};
}