<!DOCTYPE html>
<html ng-app="oostApp">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.6/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.6/angular-strap.tpl.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="SearchController">
<div class="col-xs-4">
<input type="text" class="form-control input-lg" id="city" name="city" ng-model="data.cityState" placeholder="City" ng-options="subscribedTown.id as subscribedTown.label for (index, subscribedTown) in data.subscribedTowns" bs-typeahead>
</div>
</body>
</html>
// Code goes here
var oostApp = angular.module('oostApp', ['mgcrea.ngStrap']);
oostApp.controller('SearchController', ['$scope', function ($scope) {
$scope.data = {};
$scope.data.cityState = '';
$scope.data.subscribedTowns = {
'54bd7820104d630153f62a06': {
id: "54bd7820104d630153f62a06", label: "Bloomfield, CT", name: "Bloomfield", state: "CT"
},
'54bd7829104d630153f66082': {
id: "54bd7829104d630153f66082", label: "Manchester, CT", name: "Manchester", state: "CT"
}
};
}]);
/* Styles go here */