Как изменить текст на кнопке, когда пользователь выбирает один вариант из раскрывающегося списка? (angular.js)

Question

Я пишу веб-страницу с angular.js и bootstrap, и у меня есть компонент точно так же, как this one Когда пользователь разворачивает меню и выполняет действие - я хочу изменить текст на кнопке. Пока мой код выглядит следующим образом:

<div class="btn-group"> 
    <button type="button" class="btn btn-danger" ng-click="queryUsers()">Show data from last hour</button> 
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> 
     <span class="caret"></span> 
     <span class="sr-only">Toggle Dropdown</span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a ng-click="queryUsersFromYesterday()">Show data from yesterday</a></li> 
     <li><a ng-click="queryUsersFromLastWeek()">Show data from last week</a></li> 
     <li><a ng-click="queryUsersFromLastMonth()">Show data from last month</a></li> 
    </ul> 
</div> 

Сейчас, когда пользователь щелкает: показать данные прошлой недели - меню исчезнет, ​​но кнопка все еще есть текст: показать данные из последнего часа. Как я могу динамически изменять текст на кнопке?

Answer 1

Я бы сохранить один флаг внутри сферы, что будет только один раз установить на истинный

<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" ng-click="buttonClicked = true;"> 
    <span ng-class="buttonClicked? 'caret': 'sr-only'" 
     ng-bind="buttonClicked? 'Toggle Dropdown': 'Toggled'"> 
    </span> 
</button>