angular.bootstrap.typeahead

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div ng-controller="Controller">
    
<div>
    <h2>Bind to array of objects</h2>
    <input type="text"
        ng-model="selected"
        typeahead="item as item.name for item in items | filter: $viewValue"
        template-url="template-1" />
        
    <script type="text/ng-template" id="template-1">
        <ul class="typeahead dropdown-menu"  ng-style="{display: isOpen()&&'block' || 'none', top: position.top+'px', left: position.left+'px'}">
            <li ng-repeat="match in matches" ng-class="{active: isActive(match) }" ng-mouseenter="selectActive(match)">
                <a tabindex="-1" ng-click="selectMatch(match)" ng-bind-html-unsafe="match.name"></a>
            </li>
        </ul>
    </script>
    
    <code>{{selected | json}}</code>
</div>
    
<div>
    <h2>Bind to groups</h2>
    <input type="text"
        ng-model="selected"
        typeahead="item as item.name grouped as (item in group) for group in getGroups($viewValue)"
        template-url="template-2" />
        
    <script type="text/ng-template" id="template-2">
        <ul class="typeahead dropdown-menu"  ng-style="{display: isOpen()&&'block' || 'none', top: position.top+'px', left: position.left+'px'}">
            <li ng-repeat="group in groups">
                <span>Group {{$index}}</span>
                <ul class="dropdown-menu">
                    <li ng-repeat="match in group" ng-class="{active: isActive(match) }" ng-mouseenter="selectActive(match, group)">
                        <a tabindex="-1" ng-click="selectMatch(match)" ng-bind-html-unsafe="match.name | typeaheadHighlight:query"></a>
                    </li>
                    <li class="divider"></li>
                </ul>
            </li>
        </ul>
    </script>
    
    <code>{{selected | json}}</code>
</div>    
    
</div>





<script...

CSS

.typeahead .dropdown-menu {
    display: block;
    position: relative;
    float: none;
}

JavaScript

function Controller($scope) {
    $scope.items = [
        { name: 'Alabama' },
        { name: 'New-York' },
        { name: 'Washington' },
        { name: 'Los Angeles' }
    ];
    
    var group1 = [
        { name: 'Alabama' },
        { name: 'New-York' }
    ];
    
    var group2 = [
        { name: 'Washington' },
        { name: 'Los Angeles' }
    ];
    
    $scope.getGroups = function(query) {
        return [
            group1, 
            group2
        ];
    };
}

angular.module('app', [
    'ui.bootstrap.typeahead.alt', 
    'template/typeahead/typeahead.html'
])
.controller('Controller', Controller);

angular.bootstrap(document.body, ['app']);