当用户从下拉列表中选择一个选项时，如何更改按钮上的文本？ （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

我会保持范围内的一个标志，这只会一次设置为true

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