Button doesn't work after partial view rendering

Question

Warning! This question is not for people with heart problems.

Problem explanation: When the page is loaded I click the button to delete the list item, works fine. After that, the partial view is reloaded (ajax call) but the same delete button doesn't work anymore. So, button is functional before partial view reload, but isn't after it.

Since I want to make a treeview of my items, I am using Bootstrap Treeview library. Original Bootstrap Treeview is not enough for my needs, so I added buttons on the right side of each item in treeview, as shown on the next picture...

Treeview

I don't think the problem could be in this code, but this is how I achieved the additional buttons on each item:

Tree.prototype.template = {
    list: '<ul class="list-group"></ul>',
    item: '<li class="list-group-item"></li>',
    indent: '<span class="indent"></span>',
    icon: '<span class="icon"></span>',
    link: '<a href="#" style="color:inherit;"></a>',

    buttonAdd: '<button class="btn btn-default btn-flat theme-button"><i class="fa fa-plus"></i></button>',
    buttonRemove: '<button class="btn btn-default btn-flat theme-button"><i class="fa fa-trash"></i></button>',
    buttonGroup: '<div class="btn-group pull-right"></div>',

    badge: '<span class="badge"></span>'
};

 treeItem
      .append($(_this.template.buttonGroup)
            .append($(_this.template.buttonAdd).attr('ng-click', "showAddChildModal('" + node.Guid + "', '" + node.projectGuid + "')"))
             .append($(_this.template.buttonRemove).attr('ng-click', "deleteCriteria('" + node.Guid + "', '" + node.projectGuid + "')"))
       );

On the second part of the code you can see that I dynamically added ng-click event which calls deleteCriteria function located in my angular file.

Angular function

$scope.deleteCriteria = function (guid, projectGuid) {
        $.ajax({
                type: 'POST',
                url: '/Project/DeleteCriteria',
                data: {
                    guid: guid,
                    projectGuid: projectGuid
                },
                cache: false,
                success: function (data) {
                    if (data === true) {
                        $.ajax({
                            type: 'GET',
                            url: '/Project/UpdateCriteriaTreeViewPartial',
                            data: {
                                guid: projectGuid
                            },
                            cache: false,
                            success: function (data) {

                                if (data !== null) {
                                    $("#criteria-tree-view-container").html($compile(data)($scope));

                                } else {
                                    ///
                                }
                            },
                            error: function (xhr, status, error) {
                                ///
                            }
                        });
                    } else {
                        ///
                    }
                },
                error: function (xhr, status, error) {
                    ///
                }
            });
    });

In this code, we can see the first ajax call which calls the controller action to delete the object (works fine). If the object is deleted (Ajax returns true), the second ajax call access the controller action to get the partial view with the new data (without the deleted list item).

This is the partial view code:

@model string

@Styles.Render("~/Content/BootstrapTreeview")
@Scripts.Render("~/bundles/BootstrapTreeview")


<div class="col-lg-12">
    <div class="row" style="margin-bottom: 20px;">
        <h4>Kriteriji</h4>
    </div>
    <div id="tree" style="width: 100%;">

    </div>
</div>

<script type="text/javascript">
    DrawCriteriaTreeView(@Html.Raw(Json.Encode(Model)));
</script>

The div element with id "tree" is a place where bootstrap-treeview puts the treeview. String Model is the json data received from the server (with list items) which I encode and pass to the next javascript function on the end of the partial view:

function DrawCriteriaTreeView(json) {
    var jsonParsed = JSON.parse(json);

    $('#tree').treeview({
        data: jsonParsed,
        backColor: '#323C48',
        color: "white",
        onhoverColor: "#303A46",
        showTags: false,
        selectedBackColor: "#303B46",
        enableLinks: false
    });
}

As you see, this function parse the received json and calls the treeview function to create a treeview with new data.

The solution is very complicated so I will try to explain it simple

Page load -> inline script (at the end) calls DrawCriteriaTreeView function with json received through model -> this function then parse the json and calls treeview function in BootstrapTreeview library -> it creates treeview with the "delete item" button -> renders the page

Then I click on the delete item button (it works first time) -> Angular called (Server called through ajax) and item updated in the database -> second ajax call calls controller action to get partial view with new data -> renders partial view -> DrawCriteriaTreeView function called with new data -> treeview generator function called -> treeview rendered

Then, when I click the Delete item button, nothing happens. Also, I don't get any errors in the console.

I compared both item predeletion page and item postdeletion page, there is no differences except the deleted item, as it should be.