Angular UI-Bootstrap dropdown button on ng-options

Question

<select class="form-control" data-ng-options="t.name for t in vm.types"
data-ng-model="vm.object.type"></select>

The code above obviously displays a basic dropdown in a standard form-control manner. I've been trying to figure out how to convert this to a button style dropdown using Angular's ui-bootstrap directives but can't seem to get anywhere. Has anyone tried this?

Answer 1

I hope you already found the answer, but maybe someone else will find this useful. The previous answer refers to a common drop down not a button drop down. Here is an example, but without the benefits of hg-option while I didn't use a select but a button.

<div class="input-group">
    <div class="input-group-btn" ng-class='{open: open}'>
        <button class="btn dropdown-toggle"
                data-toggle="dropdown" 
                ng-click='open=!open'>
            Action<span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li ng-repeat="choice in choices" 
                        ng-click="setChoiceIndex($index);$parent.open =!$parent.open">
                    <a href="#">{{choice}}</a></li>
                </ul>
    </div>
    <input type="text" ng-model="choices[index]" class="form-control">
 </div>

where choices is an array of strings that will be displayed in the drop down and index is another variable in the controller scope that will reflect the selected choice.