Code:
[{"id":"44878260.2a53ac","type":"ui_template","z":"bd3199c3.5714e8","group":"15cef6d6.1902e1","name":"Cabin Temperature template","order":5,"width":0,"height":0,"format":"<p style=\"text-align:left\">Cabin Temperature\n<span style = \"float:right\" id = \"CabinTemp\">\n</span>\n</p>\n\n<script>\n\n \n (function(scope) {\n scope.$watch('msg.payload', function(data) {\n var element = document.getElementById('CabinTemp');\n element.innerHTML = data + '°C';\n if(data < 0){\n element.style.color = \"blue\";\n }\n if(data >= 0 && data < 20){\n element.style.color = \"green\";\n }\n if(data >= 20 && data < 25){\n element.style.color = \"yellow\"; \n }\n if(data >= 25 && data < 30){\n element.style.color = \"orange\";\n }\n if(data >= 30){\n element.style.color = \"red\";\n }\n element.style.fontWeight = \"bold\";\n element.style.fontSize = \"larger\";\n });\n })(scope);\n\n</script>\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":515,"y":238,"wires":[[]]},{"id":"15cef6d6.1902e1","type":"ui_group","z":"","name":"Group 3","tab":"ae0d9f06.7e80e8","order":2,"disp":true,"width":"6"},{"id":"ae0d9f06.7e80e8","type":"ui_tab","z":"","name":"Pi","icon":"dashboard","order":1}]
I removed the ng-bind-html and added the data by javascripts innerHTML function.