Assigning Click Event After Altering innerHTML
<p><strong>Using AngularJS w/ Meteor</strong></p>

<p>Essentially, I have a ng-click event on a  which calls a function that clones the  and places it elsewhere. I changed some of the innerHTML so that there is a 'x' icon for removing the item. I would like to be able to click that new  to remove it.</p>

<p>So, I know that setting an attribute of ng-click does not work. I am stuck on how I can make this happen.</p>

<p>my template addClass.html</p>

<pre><code>&lt;tr id="{{$index}}" ng-repeat="class in $ctrl.classes" ng-click="$ctrl.addThisClass($event)"&gt;
            &lt;td&gt;&lt;span class="badge pull-left"&gt;{{class.units}}&lt;/span&gt;&amp;nbsp; {{class.name}}&lt;/td&gt;
            &lt;td&gt;{{class.number}}&lt;/td&gt;
            &lt;td&gt;{{class.teacher}}&lt;span class="glyphicon glyphicon-plus text-danger pull-right"&gt;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>the function it calls</p>

<pre><code>addThisClass = function($event) {
    var clone, table, tableBody, tableRow, tableRowLength, cmpTableData, tableData, tableDataText, remove, alert, footer;
    clone = $event.currentTarget.cloneNode(true);
    table = document.getElementById('queuedClasses');
    tableBody = table.getElementsByTagName('tbody')[0];
    tableRow = tableBody.getElementsByTagName('tr');
    tableRowLength = tableBody.getElementsByTagName('tr').length;
    tableData = clone.getElementsByTagName('td');
    footer = document.getElementById("modalFooter");
    tableDataText = tableData[2].textContent;
    if (tableRowLength &lt; 7) {
        for (var i = 0; i &lt; tableRowLength; i++) {
            if (tableRow[i].getElementsByTagName('td')[1].textContent == tableData[1].textContent) {
                if (footer.getElementsByClassName('alert').length === 0) {
                    alert = document.createElement('div');
                    alert.className = 'alert alert-danger text-left';
                    alert.id = 'alertMessage';
                    alert.setAttribute('role', 'alert');
                    alert.appendChild(document.createTextNode('Sorry, you already added that class to the queue.'));
                    footer.insertBefore(alert, footer.childNodes[0]);
                    setTimeout(function() {
                        $("#alertMessage").fadeTo(500, 0).slideUp(500, function() {
                            $(this).remove();
                        });
                    }, 3000);
                }
                return;
            }
        }
        remove = '&lt;span class="glyphicon glyphicon-remove text-danger pull-right" style="padding-top: 2px; !important;" title="Delete Class"&gt;&lt;/span&gt;';
        tableData[2].innerHTML = tableDataText + remove;
        tableBody.appendChild(clone);
    } else {
        if (footer.getElementsByClassName('alert').length === 0) {
            alert = document.createElement('div');
            alert.className = 'alert alert-danger text-left';
            alert.id = 'alertMessage';
            alert.setAttribute('role', 'alert');
            alert.appendChild(document.createTextNode('You cannot have more than 7 classes queued.'));
            footer.insertBefore(alert, footer.childNodes[0]);
            setTimeout(function() {
                $("#alertMessage").fadeTo(500, 0).slideUp(500, function() {
                    $(this).remove();

                });
            }, 3000);
        }
    }
    /* Reset Filter */
    var input, filterTable, filterTR;
    input = document.getElementById("searchForClasses");
    input.value = '';
    filterTable = document.getElementById("tableClasses");
    filterTR = filterTable.getElementsByTagName("tr");
    for (i = 0; i &lt; filterTR.length; i++) {
        filterTR[i].style.display = "";
    }
}
</code></pre>