JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
	<div style="margin: 40px;">
    <div ng-controller="WarehousesCtrl">
        <pre>query: {{query | json}}</pre>
        <pre>selectedWarehouse: {{selectedWarehouse | json}}</pre>
        <input
            class="form-control input-sm"
            ng-model="query"
            typeahead="warehouse.info for warehouse in warehouses | filter:$viewValue"
            typeahead-on-select="selectedWarehouse = $item;"
			ng-keypress="fetchWarehouses();"
        />
    </div>
	</div>

JavaScript

angular.module('myApp', ['ui.bootstrap'])
	.controller('WarehousesCtrl', ['$scope', '$http', '$q', function ($scope, $http, $q) {
		$scope.query = null;
		$scope.selectedWarehouse = null;
		$scope.warehouses = [];
		$scope.fetchWarehouses = function() {
            $http.jsonp(
                'http:/mysite.com/mywarehouses?q=' + $scope.query
            ).success(function(data){
                $scope.warehouses = data.warehouses;
            }).error(function(){
                // this request will fail so lets just set some dummy warehouses
                $scope.warehouses = [
                    {id:1, info:"Toronto"},
                    {id:2, info:"Tobermory"},
                    {id:3, info:"Oshawa"},
                    {id:4, info:"Ottawa"},
                    {id:5, info:"Ajax"},
                ];
            });
		};
		
	}]); 

	angular.element(document).ready(function() {
		  angular.bootstrap(document, ['myApp']);
	});