AngularJS ng-click not working for dynamically appended kendo panelbar

Question

I have a kendo-ui panelbar and i am dynamically adding items to it, I dont get the ng-click event for those items.

here is I am fetching items and appending to panelbar.

$http.get("/people").success(function (data) {
    var arr = [];
    if (data.success) {
        $.each(data.result, function (k, v) {
            var item = {
                text: v.name,
                items: [{
                    text: 'email: ' + v.email
                }, {
                    text: '<div><button class="k-button" ng-click="edit()">Edit</button></div>',
                    encoded: false

                }]
            };
            arr.push(item);

        });
        usersPanelBar.append(arr, usersPanelBar.element.children("li:last"));
    }
});

This is my controller

function userController($scope, $http, $location, $cookieStore) {
    $scope.edit = function () {
        alert("Will this work?");
        //not workng
    };
}

Answer 1

You need to use $compile service to tie your little added snippet to the scope. You may find an example here - angular, in directive, adding to the template an element with ng model

Answer 2

How about to add something like this to your usersPanelBar

<div ng-repeat="item in items">
    Email: {{item.email}}
    <div><button ng-click="edit()">Edit</button></div>
</div>

And push all retrieved data in the items array

function(data) {
    if(data.success) {
        $scope.items = data.result;
    }
});

Does it make sense?