AngularJS toggle string on click

Question

<button id="visibilityStatus" ng-model="visibilityStatus" ng-click="visibilityEnable()">Enable</button>

$scope.visibilityEnable = function() {
    document.getElementById('visibilityStatus').value(document.getElementById('visibilityStatus').value == 'Enabled' ? 'Disabled' : 'Enabled');
}

Using AngularJS I'm tryingto toggle between 2 values when the button is clicked, the values I'm trying to get it to toggle are Enabled and Disabled

Thanks in advance

Answer 1

From your controller you just set the value(s) that you want to display, and have the HTML template render your value(s).

Change your markup to:

<button ng-model="visibilityStatus" ng-click="visibilityEnable()" ng-bind="buttonText"></button>

alternate markup:

<button ng-model="visibilityStatus" ng-click="visibilityEnable()">{{buttonText}}</button>

And in your controller:

$scope.buttonText = 'Enable'
$scope.visibilityEnable = function(){
  $scope.buttonText = $scope.buttonText === 'Enable' ? 'Disable' : 'Enable';
}

Answer 2

Little bit simple

<button ng-init="buttonText='Enable'" ng-click="buttonText = buttonText === 'Enable' ? 'Disable' : 'Enable'">{{buttonText}}</button>