# Angular Scope Watch - Setting Dynamic icon color variable

**URL:** https://discourse.nodered.org/t/angular-scope-watch-setting-dynamic-icon-color-variable/99765
**Category:** Dashboard
**Created:** [24 November 2025 12:25 UTC](https://discourse.nodered.org/t/angular-scope-watch-setting-dynamic-icon-color-variable/99765 "2025-11-24T12:25:55Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)
#### Post date: [24 November 2025 12:25 UTC](https://discourse.nodered.org/t/angular-scope-watch-setting-dynamic-icon-color-variable/99765/1 "2025-11-24T12:25:55Z")

</div>

I am working on the dashboard 1 to help a friend. I have a button that I have created and I am trying to dynamically set the icon color based on the payload input value (0 or 1).

I also set the ngClick value and icon color and that is working but the dynamic change on msg.payload is not.

```auto
<script>
    (function(scope) {
        scope.newRelayValue = function() {
            if (scope.msg.payload === 0) {
                scope.iconColor = 'icon-on'
                scope.send({ payload:"/0001:RY1,1:XX\r\n" });
            } else {
                scope.iconColor = 'icon-off'
                scope.send({ payload:"/0001:RY1,0:XX\r\n" });
            }
        },
        scope.$watch('msg', function(newMsg) {
            if (newMsg) {
                scope.newRelayValue(msg.payload)                 
            }; 
        });
    })(scope);
        (function(scope) {
        scope.iconColor = function() {
            if (scope.msg.payload === 0) {
                scope.iconColor = 'icon-on'
            } else {
                scope.iconColor = 'icon-off'
            }
        },
        scope.$watch('msg', function(Msg) {
            if (Msg) {
                scope.iconColor(msg.payload)                 
            }; 
        });
    })(scope);

   

</script>

<md-button class="filled rounded smallfont" style="background-color: #6F6F6F; color:#333; justify-content: center" title="Click to select"
     ng-click="newRelayValue()">
   <span class="material-symbols-outlined container {{iconColor}}">electric_bolt</span>
    Relay 1
</md-button>

```

In the above code I created a new msg watch scope and still no joy. Thanks for your help.

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [24 November 2025 12:35 UTC](https://discourse.nodered.org/t/angular-scope-watch-setting-dynamic-icon-color-variable/99765/2 "2025-11-24T12:35:05Z")

</div>

Is there a reason to use a template node to define the button, apart from the urge to write all that javascript?

If you use a button node you can style it quite easily with CSS, and dynamically change it by sending msg.class.

---

<div class="post-metadata">

### Author: ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)
#### Post date: [24 November 2025 12:43 UTC](https://discourse.nodered.org/t/angular-scope-watch-setting-dynamic-icon-color-variable/99765/3 "2025-11-24T12:43:45Z")

</div>

Thanks for your reply. Yes there is a reason. The buttons take up to much real estate and I have been using ui templates for a couple of years now. In the past I used a function node to set the variable but I wanted to get away from that and try the Angular watch method. Like I stated the button will change color on ngClick but it will not dynamically change. I assumed this is an easy fix I am just over looking what the answer is.

Regards

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [24 November 2025 13:15 UTC](https://discourse.nodered.org/t/angular-scope-watch-setting-dynamic-icon-color-variable/99765/5 "2025-11-24T13:15:49Z")

</div>

> [@Mick](#):
>
> The buttons take up to much real estate

Sounds reasonable.

> [@Mick](#):
>
> I wanted to ... try the Angular watch method.

I have no doubt it's possible but I have not used a template in that way.

---

<div class="post-metadata">

### Author: ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)
#### Post date: [24 November 2025 13:23 UTC](https://discourse.nodered.org/t/angular-scope-watch-setting-dynamic-icon-color-variable/99765/6 "2025-11-24T13:23:22Z")

</div>

I figured it out. I had to back to some old code and I used jQuery. Here is the code.

```auto
<script>
    (function(scope) {
        scope.newRelayValue = function() {
            if (scope.msg.payload === 0) {
                scope.send({ payload:"/0001:RY1,1:XX\r\n" });
            } else {
                scope.send({ payload:"/0001:RY1,0:XX\r\n" });
            }
        },
        scope.$watch('msg', function(newMsg) {
            if (newMsg) {
                scope.newRelayValue(msg.payload)                 
            }; 
        });
    })(scope);
    
(function(scope) {
    scope.$watch('msg', function(msg) {
        if (msg) {
            var iconElement = $("#relayIcon");
            if (msg.payload === 0) {
                iconElement.css("color", '#FF0000');
            } else {
                iconElement.css("color", '#38C423');
            }
        }
    });
})(scope);
   

</script>

<md-button class="filled rounded smallfont" style="background-color: #6F6F6F; color:#333; justify-content: center" title="Click to select"
     ng-click="newRelayValue()">
   <span id="relayIcon" class="material-symbols-outlined container ">electric_bolt</span>
    Relay 1
</md-button>

```

---

<div class="post-metadata">

### Author: ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)
#### Post date: [24 November 2025 13:28 UTC](https://discourse.nodered.org/t/angular-scope-watch-setting-dynamic-icon-color-variable/99765/7 "2025-11-24T13:28:14Z")

</div>

@jbudd

One last tweak... I wanted to also change the icon color based on ngClick as well. Here is the solution.

```auto
<script>
    (function(scope) {
        scope.newRelayValue = function() {
            var iconElement = $("#relayIcon");
            if (scope.msg.payload === 0) {
                scope.send({ payload:"/0001:RY1,1:XX\r\n" });
                iconElement.css("color", '#38C423');
            } else {
                scope.send({ payload:"/0001:RY1,0:XX\r\n" });
                iconElement.css("color", '#FF0000');
            }
        },
        scope.$watch('msg', function(newMsg) {
            if (newMsg) {
                scope.newRelayValue(msg.payload)                 
            }; 
        });
    })(scope);
    
(function(scope) {
    scope.$watch('msg', function(msg) {
        if (msg) {
            var iconElement = $("#relayIcon");
            if (msg.payload === 0) {
                iconElement.css("color", '#FF0000');
            } else {
                iconElement.css("color", '#38C423');
            }
        }
    });
})(scope);
   

</script>

<md-button class="filled rounded smallfont" style="background-color: #6F6F6F; color:#333; justify-content: center"
    title="Click to select" ng-click="newRelayValue()">
    <span id="relayIcon" class="material-symbols-outlined container ">electric_bolt</span>
    Relay 1
</md-button>

```