Angular Material: md-button ~ hoot change the text of the button based on input on NodeRed

Question

in NodeRed, I use the newish UI_Dashboard Template node, which use normal Angular Material notation for buttons etc, I have the following doing a working button:

<md-button
ng-style="{background: msg.payload=='0' ?'green':'red'}"
ng-click="msg.payload = (msg.payload=='0' ? send({payload: 'event,allsprinkleroff'}) : send({payload: 'event,allsprinkleroff'})) "
> Button Name

But, I want the 'Button Name' to change based on the incoming msg.payload value. Any ideas now? All my googling and searching here did not give me answers? (newbi)

Answer 1

Here you go - CodePen

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-button ng-style="{background: msg.payload=='0' ?'green':'red'}" ng-click="msg.payload =(msg.payload=='0' ? send({payload: 'event,allsprinkleroff'}) : send({payload:'event,allsprinkleroff'})) ">Payload {{msg.payload}}</md-button>

  <br>
  <md-button ng-click="togglePayLoad()">Toggle Payload</md-button>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function($scope) {
  $scope.msg = {
    payload: 0
  }

  $scope.togglePayLoad = function () {
    $scope.msg.payload = ($scope.msg.payload === 0) ? 1 : 0;
  }
});