Click not working after html append using ajax in Kendo UI - ajax

Question

I'm working in kendo UI & I'm facing an issue while I give an ng-click option on the HTML content which was loaded later.
Here I'm adding a few codes related to what I have did:
HTML:
<div ng-controller="KendoCtrl">
<div class="show_html_here"><!-- Ajax inserts HTML here --></div>
</div>
HTML & ng-click in RED box & which is working:
<div ng-model="open_Filter" ng-click="onClick('open_Filter')">
<span>Total Open</span>
<span>0</span>
</div>
HTML & ng-click in ajax HTML & which is not working:
<ul>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 1</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 2</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 3</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 4</li>
</ul>
While clicking in any of the li which has ng-click, the alert is not working.
I have also tried by adding the ajax HTML section directly to my view page without the ajax and at that point, the click was working fine.
Ajax:
$('body').on('change', '#dropdown_id', function(){
$.post('controller/htmlsection', {'id': $this.val()}, function(data) {
$('.show_html_here').html(data.html);
});
});
Kendo/Angular Codes:
angular.module("KendoApp", ["kendo.directives"]).controller("KendoCtrl", function ($scope, $http) {
...
$scope.onClick = function(param) {
alert(param); // Not working while we click in a section which is loaded in ajax(eg.: PRT-4)
}
...
});
alert(param); inside $scope.onClick not working while we click in a section which is loaded in ajax(eg.: PRT-4) to div with class show_html_here. I think that it is because of the reason that the ajax section is loaded later the Kendo/Angular code is initiated.
If you know some solution for this please help me.

Answer 1

I do not get a solution from Stack & need to find a way to solve my issue. I found a solution for the issue, do not know whether its a proper way or not, but it solved my issue.
Update in HTML:
<ul>
<li class="customFilter" ng-model="stageFilter">PRT - 1</li>
<li class="customFilter" ng-model="stageFilter">PRT - 2</li>
<li class="customFilter" ng-model="stageFilter">PRT - 3</li>
<li class="customFilter" ng-model="stageFilter">PRT - 4</li>
</ul>
Kendo/Angular Codes:
// Custom Click
$('body').off('click', '.customFilter').on('click', '.customFilter', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
active = 0;
} else {
$(this).addClass('active');
active = 1;
}
$scope.onClick('stageFilter', active); // Click was working as required
});
The custom click was working properly as I required because of the reason that the click was happening only after the HTML from ajax is loaded.
I do not say that this solution is a proper way, but it's my issue for this time.
Open to new or a proper solution