Problem sending message from ui-template node

Use the self calling Function as the example in the Help tab of the ui_template
that passes scope so it can be accessed anywhere in the code.
then use it as scope.send({ payload: "Home" });

ui_template Code
<script type="text/javascript">

    (function (scope) {


        if ($('.md-toolbar-tools').length != 0)
            loadClock();
        else
            setTimeout(loadClock, 500);


        function loadClock() {
            $('#clock').remove();
            var toolbar = $('.md-toolbar-tools');

            var div = $('<div/ class="clock-style">');
            var p = $('<p/ id="clock">');

            div.append(p);
            div[0].style.margin = '5px 5px 5px auto';
            toolbar.append(div);

            // Add element for clickable home icon if not already present
            var i = document.createElement('i');
            i.classList.add("fa");
            i.classList.add("fa-home");
            i.classList.add("fa-2x");
            i.classList.add("icon-padding");
            i.addEventListener('click', sendPayload);
            toolbar.append(i);

            function displayTitle(lh) {
                p.text(lh);
            }

            function upTime() {
                var d = new Date();
                p.text(d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }));
            }

            if (document.clockInterval) {
                clearInterval(document.clockInterval);
                document.clockInterval = null;
            }

            document.clockInterval = setInterval(upTime, 1000);

            function sendPayload() {
                scope.send({ payload: "Home" });
            }
        }


    })(scope);




</script>