Update bootstrap dropdown button value and action in angular-ui

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><a href="#" ng-click="update('Action', func1); func1()">Action</a></li>
    <li><a href="#" ng-click="update('Another action', func2); func2()">Another action</a></li>
    <li><a href="#" ng-click="update('Something else here', func3); func3()">Something else here</a></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><a href="#" ng-click="func1()">do something</a></li>
    <li><a href="#" ng-click="func2()">do anything</a></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><a href="#" ng-click="func1()">Action</a></li>
    <li><a href="#" ng-click="func2()">Another action</a></li>
    <li><a href="#" ng-click="func3()">Something else here</a></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().