How to get dynamic content working in angularjs on button click

Question

I'd like to start off by saying javascript is new to me and I think I need an expert on how to accomplish this task. I have a modal screen that is created when a button is clicked. What I need to do is create a new modal every time I click this button and destroy it every time I close it out. I've had some help with doing this, however I am running into issues. The code that I am using and the issues I am having are explained below:

Variable I store the HTML element in:

var modalString = `<div class="modal" style="position: absolute; left: 0px; top:0px; width: 100%; height: 100%;">
    <div class="modal-content">
        <div class="modal-header">
            <span class="close" ng-click="closeModal()">&times;</span>
            <h2>
                History
                <button type="button" ng-click="showAllComments()" class="modal-header-button"> Expand all comments </button>
                <button type="button" ng-click="hideAllComments()" class="modal-header-button"> Collapse all comments </button>
            </h2>
        </div>
        <div id="modalBody" class="modal-body">
            <table id="modalTable" style="table-layout: fixed; width: 100%" class="tableLayout">
                <thead>
                    <tr>
                        <th>Start Time</th>
                        <th>End Time</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat-start="value in symbolModel.Events" class="event">
                        <td>{{ value.startTime | date:'MM-dd-yyyy HH:mm:ss'}}</td>
                        <td>{{ value.endTime | date:'MM-dd-yyyy HH:mm:ss'}}</td>
                        <td><button type="button" ng-click="toggleComments()">{{ value.Comments.length > 0 ? 'View Comments' : 'No Comments' }}</button></td>
                    </tr>
                    <tr ng-repeat="comments in value.Comments" ng-repeat-end class="comment">
                        <td>{{ comments.enteredTime | date:'MM-dd-yyyy HH:mm:ss'}}</td>
                        <td colspan="2" class="tdWrap">{{ comments.comment }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
        </div>
    </div>
</div>`;

Javascript code that executes on the creation of the modal screen:

var modal = $(modalString);
modal.attr('id', name + 'FilterModal');
$('body').append(scope.symbolModel.compile(modal)(scope));
modal.show();

This code creates the modal screen and allows the buttons that I create with the 'toggleComments' call to function correctly. The problem that I am having is that the buttons in the modal header do not seem to work. The 'Expand all comments', 'Hide all comments' and 'close modal' buttons do not fire off their event when I click them. Is there a reason why? Also, is there a better way to create the DOM element? The concept of storing the HTML element in a string in the JS code and compiling it on the 'View History' button click seems ugly. Any help or suggestions would help out immensely.

I've also found this link. This is what I used to start off, but like I said before, not all elements have their events firing off. AngularJS + JQuery : How to get dynamic content working in angularjs