# Using the msg.payload to change ui template

**URL:** <https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829>\
**Category:** Dashboard\
**Created:** [4 September 2018 10:52 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829 "2018-09-04T10:52:50Z")\
**Posts on this page:** 1\
**Showing post:** 19

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [4 September 2018 15:28 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/19 "2018-09-04T15:28:54Z")

</div>

I edited manually the flow in order to try to understand the issue at hand.

```auto
<!DOCTYPE html>
<html>

<body>
    <div ng-bind-html="msg.payload"></div>
    <p>Image to use:</p>
    <img id="scream" width="900" height="800" src="/route.png" alt="The Scream">
    <p>Canvas:</p>
    <canvas id="myCanvas" width="1000" height="950" style="border:1px solid #d3d3d3;"> </canvas>
    <script>  
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var img = document.getElementById("scream");
        ctx.drawImage(img, 0, 0);
        if (msg.payload == 'hey') {
            ctx.beginPath(); ctx.arc(30, 30, 30, 0, 2 * Math.PI);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.stroke();
        } 
    </script>
</body>

</html>

```

The question seems to boils down to : How to read msg.payload property inside the script tag in an UI template node.

I guess the solution is to make use of scope.$watch

---

_[View the full topic](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829)._
