node-red template demonstrating angular scope usage

gistfile1.json

[{"id":"9b2dc340.c1d408","type":"ui_template","z":"b9fac2e9.a93d88","group":"64704468.613964","name":"Angular Example","order":0,"width":"4","height":"1","format":"<script>\n    (function(scope){\n        var numbers = [\"zero\",\"one\",\"two\",\"three\",\"four\"];\n        \n        // $watch fires each time the node is triggered in the flow\n        scope.$watch('msg', function(msg) {\n            // Here we are going to use angular scope variables\n            // (not jquery selectors) to update the value in our widget\n            scope.display_text = numbers[msg.payload];\n        })\n    })(scope);\n</script>\n<style>\n    span{\n        height: 20px;\n    }\n</style>\n\n<span style=\"color: blue\" ng-bind-html=\"msg.payload\"></span>\n<span style=\"color: red\" ng-bind-html=\"display_text\"></span> <!-- binding the display_text variable to the div -->\n<!-- <span style=\"color: green\">{{display_text}}</span> Another way of rendering display_text variable -->\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":590,"y":220,"wires":[[]]},{"id":"3820e5a6.639972","type":"inject","z":"b9fac2e9.a93d88","name":"","topic":"","payload":"","payloadType":"date","repeat":"2","crontab":"","once":true,"x":190,"y":240,"wires":[["1263d419.867eac","5d877ab6.ef857c"]]},{"id":"1263d419.867eac","type":"function","z":"b9fac2e9.a93d88","name":"Random 0 - 4","func":"msg.payload = Math.round(4 * Math.random());\nreturn msg;","outputs":1,"noerr":0,"x":380,"y":220,"wires":[["9b2dc340.c1d408"]]},{"id":"5d877ab6.ef857c","type":"function","z":"b9fac2e9.a93d88","name":"Random 0 - 4","func":"msg.payload = Math.round(4 * Math.random());\nreturn msg;","outputs":1,"noerr":0,"x":380,"y":260,"wires":[["c0f9fdb4.d031b8"]]},{"id":"c0f9fdb4.d031b8","type":"ui_template","z":"b9fac2e9.a93d88","group":"64704468.613964","name":"Angular Example","order":0,"width":"4","height":"1","format":"<script>\n    (function(scope){\n        var numbers = [\"zero\",\"one\",\"two\",\"three\",\"four\"];\n        \n        // $watch fires each time the node is triggered in the flow\n        scope.$watch('msg', function(msg) {\n            // Here we are going to use angular scope variables\n            // (not jquery selectors) to update the value in our widget\n            scope.display_text = numbers[msg.payload];\n        })\n    })(scope);\n</script>\n<style>\n    span{\n        height: 20px;\n    }\n</style>\n\n<span style=\"color: blue\" ng-bind-html=\"msg.payload\"></span>\n<span style=\"color: red\" ng-bind-html=\"display_text\"></span> <!-- binding the display_text variable to the div -->\n<!-- <span style=\"color: green\">{{display_text}}</span> Another way of rendering display_text variable -->\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":590,"y":260,"wires":[[]]},{"id":"64704468.613964","type":"ui_group","z":"","name":"Default Group","tab":"ef22f042.de6a1","disp":true,"width":"9"},{"id":"ef22f042.de6a1","type":"ui_tab","z":"","name":"Home Tab","icon":"dashboard"}]