// Welcome to the world of AngularJS!
// Initialize app and include ui.bootstrap as dependency
var myApp = angular.module("stack", ["ui.bootstrap"]);
// Define factory for data source
myApp.factory("States", function() {
var states = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];
return states;
});
// Set up controller and provide data source
myApp.controller("TypeaheadCtrl", function($scope, States) {
$scope.selected = undefined;
$scope.states = States;
});
<!DOCTYPE html>
<html ng-app="stack">
<head>
<title>AngularJS Typeahead Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js"></script>
</head>
<body>
<div class="container-fluid" ng-controller="TypeaheadCtrl">
<h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo"> Angular.js Typeahead</h2>
<div class="form-group">
<label for="states">Search for US States</label>
<input name="states" id="states" type="text" placeholder="Enter a state" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
</div>
<button class="btn btn-success" type="submit">Submit</button>
</div>
<script type="text/javascript" src="controller.js"></script>
</body>
</html>