बटन क्लिक को एजी-ग्रिड में सेलरेंडरर का उपयोग करके <div> में डेटा प्रदर्शित करना चाहिए

मेरे पास एजी-ग्रिड टेबल है। मैं 'Bookingxml' कॉलम डेटा को बटन से बदल रहा हूं। जब उस बटन पर क्लिक किया जाता है, तो उसे उस विशेष सेल का डेटा 'आउट' डिव में दिखाना चाहिए। मैं प्रलेखन के माध्यम से चला गया और लगा, सेलरेंडरर इसे करने का तरीका है। मैंने नीचे दिए गए कोड की कोशिश की, लेकिन यह काम नहीं किया।

var gridOptions = {
    columnDefs: [

        {headerName: 'Booking Type', field: 'BookingType', width: 200},
        {headerName: 'Booking Error', field: 'BookingError', width: 150 },
        {headerName: 'Booking Date', field: 'BookingDate', width: 150, filter: 'number', filterParams: {apply: true, newRowsAction: 'keep'}},
        {
            headerName: 'Booking XML', field: 'Bookingxml', width: 250, 
            cellRenderer: function (params) {

                return '<button ng-click="display()">View XML</button>';
            }

        }
    ],
    enableColResize: true,
    enableSorting: true,
    enableFilter: true

};

return gridOptions;
}

function display(xml) {
    $('#out').html(params.value);
}