How to display the selected Item on Bootstrap Dropdown Title in Angular?

Problem

Don't be mean because I'm new to Angular. So I have a bootstrap Dropdown component in my project and I would like to change the text of the button depending on the clicked link.

On the internet, I've only come across JQuery implementation.

So does anyone know how to do this in Angularjs? Thanks in advance.

Codepen sandbox

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 dropdown <span class="caret"></span>
      </button>
      <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
        <li role="menuitem">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <a href="#">Something else here</a></li>
      </ul>
    </div>

  </div>
</div>

JS

angular.module('myApp', ['ui.bootstrap']).controller('DropdownCtrl', function ($scope) {

});
Problem courtesy of: Alexander Shmatko

Solution

Considering you have the basic data binding knowledge on Angularjs. Try this http://codepen.io/anon/pen/pjagZR. If you don't understand something from here feel free to ask.

<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>

JS

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;
  }
});
Solution courtesy of: Shuvro

Discussion

you use Custom Directive because directive is make once use any where:

this is directive name : dropdown-text-set

required this directive only ID name : angular_menu_item

restrict : "A",
link : function(scope, ele, attr)
{
  var dropdown_item = angular.element(document.getElementById("angular_menu_item")).children();
  for(var i = 0; i<dropdown_item.length; i++)       {
    dropdown_item.eq(i).bind("click", function($event){

      ele.html($event.target.innerHTML+'<span class="caret">');
    });
  }
}

see this example http://codepen.io/anon/pen/BoYjqy

Discussion courtesy of: Sandeep

This recipe can be found in it's original form on Stack Over Flow.