Simple script on UI template not working

Dashboard
1

Hello guys so I have this simple html on UI template.
What it does is it gets input data from other nodes. Now I want the button
to do something when I clicked it, but if feels like its not working on the function
defined (I am not actually familiar with Scopes, watch etc in Javascript) can somebody help
me how to do it? I just want 2 function on my UI template.

  1. One that recieved msg.payload from Input.
  2. On click button that when pressed, it changes the color of the button.

html script
html script876×459 52.9 KB 

<script>

(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
        var batchid = msg.batchid;
        if (msg.payload =="off" || msg.payload == 0){
                document.getElementById("oven1_timer").innerHTML = "TIMER EXPIRED";
                document.getElementById("oven1_timer").style.backgroundColor = "#6E0A1E";
                
        }else{
            document.getElementById("oven1_timer").innerHTML = msg.hremain + "h " + msg.mremain + "m " + msg.sremain + "s";
            if (msg.payload <= 300){
                document.getElementById("oven1_timer").style.backgroundColor = "#6E0A1E";
            }else{
                document.getElementById("oven1_timer").style.backgroundColor = "#D1790E";
            }
        }
      $("#my_"+scope.$id).html(msg.payload);
    }
  });
})(scope);

</script>
<md-button id="oven1_timer" ng-click="clearTimer()" style="font-size:18px">
    hh:mm:ss
</md-button>
2

on the button ng-click to trigger the "ClearTimer()" function. however when I created the
clearTimer on , the function did not function well. I don't know where I am going to put the "clearTimer" function. it seems that the function(scope) {} that was first define in my UI template blocked any other function. I dont know if my observation is correct here. Can someone help me? Thank you very much !