Update DropDown - Using Jquery and AngularJS

Question

How can I dynamically update this dropdown, so that by clicking another button, through ng-click () I can change and update to the <li><a data-action="100">100</a>

 <ul class="dropdown-menu pull-right" role="menu"> <li aria-selected="true" class="active"> <a data-action="10" class="dropdown-item dropdown-item-button">10</a> </li> <li aria-selected="false"> <a data-action="25" class="dropdown-item dropdown-item-button">25</a> </li> <li aria-selected="false"> <a data-action="50" class="dropdown-item dropdown-item-button">50</a> </li> <li aria-selected="false"> <a data-action="100" class="dropdown-item dropdown-item-button">100</a> </li> </ul> 

Answer 1

You can create a collection of objects in your controller and manipulate them with functions.

<div ng-app ng-controller="ddlController">
   <ul class="dropdown-menu pull-right" role="menu">
      <li ng-repeat="option in options" aria-selected="isSelected(option)" ng-class="{'active': isSelected(option)}">
           <a data-action="{{option.action}}" class="dropdown-item dropdown-item-button" ng-click="select(option)">{{option.action}}"</a>
      </li>
   </ul>
   <button ng-click="select100()">Select 100</button>
</div>

Controller:

 function ddlController($scope) {
  $scope.options = [{
    action: 10
  }, {
    action: 25
  }, {
    action: 50
  }, {
    action: 100
  }];
  $scope.selected = $scope.options[0];

  $scope.isSelected = function(option) {
    if (option.action === $scope.selected.action) {
      return true;
    }
    return false;
  };

  $scope.select = function(option) {
    $scope.selected = option;
  };

  $scope.select100 = function() {
    $scope.selected = $scope.options.find(o => o.action === 100);
  };
}

or check this fiddle: https://jsfiddle.net/VictorSDK/40wdtavp/