How to make Dropdown button that changes its title have different links?

Question

So far I've managed to get bootstrap dropdown button to change its title depending on the clicked item.

Codepen

But besides that I want every dropdown item to have its own link when clicking on them.

How can I do this?

HTML

<div ng-app='myApp'>
  <div ng-controller='DropdownCtrl'>

    <div class="btn-group" uib-dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
        {{button}} <span class="caret"></span>
      </button>
      <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
        <li role="menuitem">
          <a href="#" ng-click="change(action)" ng-repeat="action in actions">{{action}}</a>
        </li>
      </ul>
    </div>

  </div>
</div>

CSS

angular.module('myApp', ['ui.bootstrap']).controller('DropdownCtrl', function($scope) {
  $scope.button = "Button dropdown";
  $scope.actions = [
    "Action", "Another Action", "Something else here"
  ];

  $scope.change = function(name){
    $scope.button = name;
  }
});

Answer 1

Do something like this, using ng-href

First change the button to an anchor and add the ng-href attribute;

<a href ng-href="{{ href }}" id="single-button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
    {{ name }} <span class="caret"></span>
</a>

Then alter the actions variable to hold an array of objects:

$scope.actions = [
    {
        name: 'Action',
        href: 'action.html'
    },
    {
        name: 'Another Action',
        href: 'another_action.html'
    },
    {
        name: 'Something else here',
        href: 'something_else_here.html'
    }
];

Then finally alter the change function to update the name of the action and the href

$scope.change = function(action){
    $scope.name = action.name;
    $scope.href = action.href;
}

EDIT Now with a CodePen example. Note that I have changed the button to a split button (otherwise the href has no use at all, because it would be overwritten by the toggle).