或者，如果您愿意，将所有内容保留在HTML中，而不是在控制器中定义按钮文本：

<button ng-click="toggle = !toggle">
    <span ng-show="toggle">Toggle to Off</span>
    <span ng-hide="toggle">Toggle to On</span>
</button>
<div class="box on" ng-show="toggle" ng-animate="'box'">On</div>

我想，用一块toggle的手表应该就可以了。

<button ng-click="toggle = !toggle">{{toggleText}}</button>
<div class="box on" ng-show="toggle" ng-animate="'box'">On</div>

然后

app.controller('AppController', function ($scope) {
    $scope.toggle = true;

    $scope.$watch('toggle', function(){
        $scope.toggleText = $scope.toggle ? 'Toggle!' : 'some text';
    })
})

演示：Fiddle

我不会使用watch和ng-show，因为它们的性能。就这么简单：

app.controller('AppController', function ($scope) {
    $scope.toggle = true;
})

<button ng-click="toggle = !toggle">{{toggle && 'Toggle!' || 'some text'}}</button>

以下是我的解决方案，支持翻译：
超文本标记语言：

<span class="togglebutton">
    <label>
        <input type="checkbox" checked="{{myApp.enabled}}"
               ng-model="myApp.enabled" ng-click="toggleEnabled()">
        <span translate="{{myApp.enableCaption}}">Is Enabled?</span>
    </label>
</span>

JS -控制器：

$scope.toggleEnabled = function() {
    $scope.myApp.enableCaption = $scope.myApp.enabled ? 'global.enabled' : 'global.disabled';
};

其中global.enabled和global.disabled指的是i18 n JSON翻译。您还需要在JS中初始化enableCaption，在您创建空对象的地方。

现有的答案是好的，但这里有一个更精确的解决方案，它使用三进制来选择适当的文本，这取决于切换是打开还是关闭。此外，toggle是一个有点不清楚的变量名，因为它不清楚“true”或“false”对应的状态。也许toggleOn或简单的on更好。

angular.module("exampleApp", [])
  .controller("toggleCtrl", function($scope) {
    $scope.on = true;
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script>
<div ng-app="exampleApp" ng-controller="toggleCtrl">
  <button ng-click="on = !on">
    Toggle {{on ? "off" : "on"}}
  </button>
  <div ng-show="on">On</div>
</div>