Ng-click не запускает функцию контроллера в таблице td click, которая отображается позже после инициализации контроллера

Я хочу вызвать функцию в контроллере (инициализированную при загрузке страницы), вызываемую ng-click, присутствующую в элементе td таблицы, который загружается после выбора некоторого параметра в поле выбора на HTML-странице.

Используя ui-router, я загружаю HTML-страницу с ее контроллером по щелчку пункта меню. Этот HTML содержит форму с полем со списком (тег select) с некоторыми параметрами. Также у меня есть div, который является контейнером для таблицы, и div пуст для загрузки страницы. Когда какой-либо параметр выбирается из поля со списком, у меня есть пользовательская директива, которая выполняет событие изменения, а внутри контейнера div создается таблица с использованием чистого JavaScript и загружается данными, полученными из вызова Ajax. На TD в этой таблице присутствует ng-click, который должен запускать функцию, присутствующую в контроллере, которая не выполняется. Я новичок в AngularJS, поэтому любая полученная помощь будет оценена по достоинству.

Я попытался использовать $digest, $apply для переменной $scope (внутри функции setTimeout JavaScript) внутри пользовательской директивы после рендеринга таблицы. Но изменения не применялись.

HTML-код

<div ng-app = "myApp">
<div ui-view>
<div id = "mainContainer" align = "center">
    <form name = "form1" id = "formWithSelect" ng-init = "loadSelectList()">
        <div align = "left">
            <p style = "display: inline-block; font-size: 1.30em;">Please select an option to fetch list.</p>
        </div>
        <div align = "left" style = "margin-left: 10px;">
            <label class = "align_label">Select Option :</label> <select
                name = "listItems"
                ng-model = "listInfo.id" id = "list_of_options"
                get-list = ""
                data-enhance = "false"
                ng-options = "option.id as option.name for option in listItems required><option
                    value = "">Select Item</option></select>
            <p ng-if = "form1.listItems.$dirty && form1.listItems.$error.required" class = "invalidMessage">Select Item</p>
        </div>
    </form>
    <div id = "tableContainer"></div>
</div>
</div>
</div>

Код AngularJS

var tableApp = angular.module("myApp", ['ui.router','uiRouterStyles','flow']);
tableApp.controller("ListCtrl", function($scope){

    $scope.loadSelectList = function(){
        $scope.listItems = manager.getListItems();
    };

    $scope.getItemInfo = function(event){
        alert("Need a pop up!!!");
        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
    };
});

tableApp.directive("getList", function(){
    return {
        restrict: "A",
        link: function ($scope,elm) {
            elm.on('change', function (ev){
               if (ev.currentTarget.value == ""){
                   $("#tableContainer").css("display","none").empty();
                }
                else{
                    $("#tableContainer").empty();
                    manager.getTableData();
                    tableDataView.viewTable();
                }
               setTimeout(function() {
                   $scope.$digest();
               }, 1000);
               ev.stopPropagation();
            });
        }
    }
});

UI router

.state('change-table-data', {
            url: '/change/table/data',
            templateUrl: 'ChangeTable.html',
            controller: 'ListCtrl',
            data: {
                  css: ['stylesheet1.css','stylesheet2.css']
                }
        })

Ожидаемый результат

<div ng-app = "myApp">
<div ui-view>
<div id = "mainContainer" align = "center">
    <form name = "form1" id = "formWithSelect" ng-init = "loadSelectList()">
        <div align = "left">
            <p style = "display: inline-block; font-size: 1.30em;">Please select an option to fetch list.</p>
        </div>
        <div align = "left" style = "margin-left: 10px;">
            <label class = "align_label">Select Option :</label> <select
                name = "listItems"
                ng-model = "listInfo.id" id = "list_of_options"
                get-list = ""
                data-enhance = "false"
                ng-options = "option.id as option.name for option in listItems required><option
                    value = "">Select Item</option></select>
            <p ng-if = "form1.listItems.$dirty && form1.listItems.$error.required" class = "invalidMessage">Select Item</p>
        </div>
    </form>
    <div id = "tableContainer">
<table>
<thead>
<tr>
<th>Serial Number</th>
<th>Item ID</th>
<th>Item Name</th>
</tr>
</thead>
<tr>
<td ng-click = "getItemInfo($event)">1</td>
<td ng-click = "getItemInfo($event)">I101</td>
<td ng-click = "getItemInfo($event)">ABC</td>
</tr>
<tr>
<td ng-click = "getItemInfo($event)">2</td>
<td ng-click = "getItemInfo($event)">I102</td>
<td ng-click = "getItemInfo($event)">XYZ</td>
</tr>
</table>
</div>
</div>
</div>
</div>

Как показано выше в разделе «Ожидаемый результат», отображается таблица, и каждый td имеет функцию ng-click над ней. По щелчку этого td мне нужно, чтобы getItemInfo() присутствовал в контроллере, чтобы вызвать, чего не происходит.