Kendo UI - AngularJS: Context menu for selected grid row

Question

I am working with Kendo UI and angular grid application. My grid is defined here. Now, I am added kendo-context-menu widget in my html just like:

<div class="contextMenuStyle">
    <ul id="contextMenu" kendo-context-menu="contextMenu" ng-right-click="contextMenu" k-filter="'td'">
       <li name='details'>Details</li>
       <li name='edit'>Edit</li>
       <li name='remove'>Delete</li>
    </ul>
</div>

Also, I am added scope context menu function in my controller:

$scope.contextMenu = function (e) {
    var gridData = $scope.gridMaster;
    var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));
    var selectedId = selectedRowData.Id;
    if (selectedId) {
        if ($(e.item).attr("name") == "details") {
            $scope.tabStrip.select(1);
            alert(JSON.stringify(selectedRowData));
        }
        else if ($(e.item).attr("name") == "edit") {
            $scope.tabStrip.select(1);
            alert(JSON.stringify(selectedRowData));
        }
        else if ($(e.item).attr("name") == "remove") {
            if (confirm("Do you really want to delete this record?")) {
                gridData.removeRow($(e.target).closest("tr"));
            }
            return true;
        }
    }
}

This is my code, but not working. What is the best way to implement context menu for selected grid row? Any help will be very useful.