<!DOCTYPE html>
<html ng-app="fooApp">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
.padded {
padding: 1em;
}
.slim-scroll {
border-style: solid;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript">
angular.module('fooApp', ['ui.bootstrap']).controller('FooController', function() {
var foo = this;
foo.selected = '';
foo.options = [
'these', 'options', 'extend', 'beyond', 'the', 'length', 'of', 'slimscroll', 'div',
'but', 'they\'re', 'only', 'visible', 'past', 'its', 'border',
'if', 'displayed', 'from', 'a', 'vanilla-ass', 'select', 'box'
];
$(() => {$('.slim-scroll').slimScroll()});
});
</script>
</head>
<body ng-controller="FooController as foo">
<div class="padded">
<div class="padded slim-scroll">
<p>
<input type="text" class="form-control" placeholder="Search" autocomplete="off"
ng-model="foo.selected" uib-typeahead="option for option in foo.options" typeahead-editable="false">
</p>
<p>
<select ng-model="foo.selected">
<option ng-repeat="option in foo.options">{{option}}</option>
</select>
</p>
</div>
</div>
</body>
</html>
// Code goes here
/* Styles go here */