Update bootstrap dropdown button value and action in angular-ui - angularjs

Question

I have a dropdown button. If I select an item from the dropdown list, the main button's action should change to the items action, and the content too.
I tried one version, as you can see above, with controller:
<div class="btn-group">
<button type="button" class="btn" ng-click="mainFunction()">{{buttonCaption}}</button>
<button type="button" class="btn dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
Plunker example
But it's really ugly, and it would better with directive, for working more than one dropdown button. Somehow the directive should change the main button's ng-click behavior to the selected item's. Like this:
<!-- button one -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger">{{button1.name}}</button>
<button type="button" class="btn btn-danger dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>do something</li>
<li>do anything</li>
</ul>
</div>
<!-- button two -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-primary">{{button2.name}}</button>
<button type="button" class="btn btn-primary dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
Is anybody have a good idea or an example for that?

Answer 1

One way to accomplish something similiar (works best if your actions change based on context):
<div class="btn-group" dropdown>
<button type="submit" class="btn btn-primary" ng-click="submit()">
{{selectedAction.name}}
</button>
<button class="btn btn-primary dropdown-toggle">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="action in actions">
<a ng-click="setAction(action)">{{action.name}}</a>
</li>
</ul>
</div>
Have a set of actions in the controller:
$scope.actions = [
{id: 'action1', name: 'Action 1'},
{id: 'action2', name: 'Action 2'}
];
And a function to set the current action:
$scope.setAction = function(action) {
$scope.selectedAction = action;
};
Then, you treat submit() as a dispatcher - it checks selectedAction.id and does the right thing or calls the right function. If you need to trigger the action as the item is selected do it in setAction().