Click not working after html append using ajax in Kendo UI

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