Demo of gm.typeaheadDropdown, which combines functionality from UI Bootstrap Dropdown and Typeahead directives.

<!DOCTYPE html>
<html ng-app='demo'>
<head>
	<title>gm.typeaheadDropdown Demo</title>
	
	<!-- Include AngularJS, UI Bootstrap, and Bootstrap CSS -->
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	
	<script src='gm.typeaheadDropdown.min.js'></script>
	<script src='script.js'></script>
</head>
<body ng-controller='DemoCtrl' style='margin:20px'>
	<p>Try it out!</p>
	<p>
		Demonstrating a simple setup with the model and options both using the default label property 'name':
		<typeahead-dropdown style='width:300px' ng-model='selectedOption' options='options'></typeahead-dropdown>
		Model: {{selectedOption}}
	</p>
	
	<p>
		Demonstrating model and options with different structures, and passing the property to use as the label using config:
		<typeahead-dropdown style='width:300px' ng-model='selectedOption2' options='options2' config='config'></typeahead-dropdown>
		Model: {{selectedOption2}}
	</p>
</body>
</html>

// Code goes here

angular.module('demo', ['gm.typeaheadDropdown'])
.controller('DemoCtrl', ['$scope', function($scope) {
	$scope.options = [
		{
			name:"Mary"
		},
		{
			name:"Jane"
		},
		{
			name:"John"
		},
		{
			name:"Fred"
		}
	];
	
	$scope.options2 = [
		{
			title:"The Fellowship of the Ring"
		},
		{
			title:"The Two Towers"
		},
		{
			title:"The Return of the King"
		},
		{
			title:"The Hobbit"
		}
	];
	
	$scope.selectedOption2 = {
		book:"The Hobbit"
	}
	
	$scope.config = {
		modelLabel:'book',
		optionLabel:'title'
	};
}]);

[View on Github](https://github.com/spongessuck/gm.typeaheadDropdown/)

/*! gm.typeaheadDropdown - v1.0.5 - 2016-02-01 */angular.module("gm.typeaheadDropdown",["ui.bootstrap"]).directive("typeaheadDropdown",function(){return{templateUrl:"templates/typeaheadDropdown.tpl.html",scope:{model:"=ngModel",getOptions:"&options",config:"=?",required:"=?ngRequired"},replace:!0,controller:["$scope","$q",function(a,b){a.config=angular.extend({modelLabel:"name",optionLabel:"name"},a.config),b.when(a.getOptions()).then(function(b){a.options=b}),a.onSelect=function(b,c,d){a.model||(a.model={}),angular.extend(a.model,b),a.model[a.config.modelLabel]=b[a.config.optionLabel]}}]}}),angular.module("gm.typeaheadDropdown").run(["$templateCache",function(a){a.put("templates/typeaheadDropdown.tpl.html",'<div><div ng-if=!options>Loading options...</div><div ng-if=options class=dropdown dropdown><div class=input-group><input class=form-control style=break-word:normal placeholder="Select or type..." ng-model=model[config.modelLabel] typeahead="op as op[config.optionLabel] for op in options | filter:$viewValue | limitTo:8" typeahead-editable=false typeahead-on-select="onSelect($item, $model, $label)" ng-required="required"> <span class=input-group-btn><button class="btn btn-default dropdown-toggle" dropdown-toggle><span class=caret></span></button></span></div><ul class=dropdown-menu role=menu style=max-height:200px;overflow-y:auto><li ng-repeat="op in options"><a href ng-click=onSelect(op)>{{op[config.optionLabel]}}</a></li></ul></div></div>')}]);