AngularJS 1.4.4: ng-click not working in grid

Question

I have a simple Web UI build in angularJS 1.4.4. I am stuck in a basic problem of the click event in UI grid. On click of eye button and file button in the grid, successnotification() function defined in the controller is not called. Whereas for refresh button, button click is working fine. Below is my code of HTML and Controller

class AccesspointListController {
  /*@ngInject*/
  /* Read me documentation for Grid : http://www.ag-grid.com/documentation.php */
  constructor($rootScope, GridFilters,AccesspointListService, SnapshotController) {
    this.name = 'accesspointlist';

    Object.assign(this, {$rootScope, GridFilters,AccesspointListService, SnapshotController});

    this.columnDefs = [
        {
            headerName: "Sr No.",
            //field: "accessPointDetailsId",
            field: "no",
            width:15,
            filter: 'number', 
            filterParams: { apply: true },
            cellStyle:{'text-align': 'center'},
            unSortIcon:true
        },    
        {
            headerName: "IP",
            //field: "accessPointIP",
             field: "ip",
            filter:'text',
            width:80,
            unSortIcon:true
        },
        {
            headerName: "Actions",
            field: "", 
            width:35,
            suppressSorting: true, 
            suppressMenu:true,
            cellRenderer: function(params) {
                return '<button class="btn primary" ng-click="grid.appScope.successnotification(row)"><i class="fa fa-eye"></i></button>'+
                '<button class="btn primary" ng-click="grid.appScope.vm.successnotification(row)"><i class="fa fa-file-image-o"></i></button>';
            }
        }
    ];
this.allOfTheData = require("json!./favCFIC.json")['items'];
    this.pageSize = '10';
    this.gridOptions = {
        columnDefs: this.columnDefs,
        //rowData: $scope.allOfTheData,//Load data here for static non paging data.
        groupHeaders: false,
        enableColResize: false,
        enableSorting: true,
        suppressRowClickSelection: true,
        headerHeight:40,
        rowHeight:40,
        angularCompileHeaders: true,
        angularCompileFilters: true,
        enableFilter: true,
        icons: {
            // use font awesome for menu icons
            sortAscending: '<i class="fa fa-sort-amount-asc"/>',
            sortDescending: '<i class="fa fa-sort-amount-desc"/>'
        }
    };

  }//end constructor

loadData() {
            let allOfTheData = this.allOfTheData;
                if(allOfTheData.length==0) {
                    $rootScope.alerts.push({
                        type: 'danger',
                        msg: 'There is an issue building the data table.',
                        targetState: 'forms'
                    });
                } else {
                    let dataSource = {
                        rowCount: (this.allOfTheData.length),
                        pageSize: parseInt(this.pageSize), // changing to number, as scope keeps it as a string
                        getRows: function (params) {
                            // this code should contact the server for rows. however for the purposes of the demo,
                            // the data is generated locally, a timer is used to give the experience of
                            // an asynchronous call
                            setTimeout(function() {
                                // take a chunk of the array, matching the start and finish times
                                let rowsThisPage = allOfTheData.slice(params.startRow, params.endRow);
                                // see if we have come to the last page. if we have, set lastRow to
                                // the very last row of the last page. if you are getting data from
                                // a server, lastRow could be returned separately if the lastRow
                                // is not in the current page.
                                let lastRow = -1;
                                if (allOfTheData.length <= params.endRow) {
                                    lastRow = allOfTheData.length;
                                }
                                params.successCallback(rowsThisPage, lastRow);
                            }, 500);
                        }
                    };
                    this.gridOptions.api.setDatasource(dataSource);
                    this.gridOptions.api.sizeColumnsToFit()

    }

successnotification(){
        this.notf1.show('Success! You\'ve clicked the Add button.', "success");
        };
}

export default AccesspointListController;

This is my html file.

<section class="container">
    <div class="col-md-10 cf">
    <div ncy-breadcrumb></div>

    <br />
<div id="notificationSpot">
</div>
<br />
<br class="cf"/>
    <div class="col-sm-8">
<div class="panel panel-default" id="content-formatting">
    <div class="panel-heading" align="right">
        <label id="lastUpdated">Last Updated : </label>
        <label id="lastUpdatedValue">19/2/2018 12:20 AM </label>
        &nbsp;&nbsp;
        <button type="button" class="btn 0" ng-click="vm.redirect()"><i class="fa fa-refresh"></i></button>
    </div>
    <div ag-grid="vm.gridOptions" class="ag-fresh" style="clear:both; height: 430px; width:100%;" ng-init="vm.loadData()"></div>

</div>
    </div>
<span kendo-notification="vm.notf1" k-position="{ top: 110}" ></span>
<span kendo-notification="vm.notf2" k-append-to="'#notificationSpot'" k-auto-hide-after="0"></span>
    </div>
</section>

Answer 1

Solution: Modify cell renderer code as per below code snippet

 cellRenderer: function(params) {
                   return $compile('<a href="" class="btn primary" ng-click="vm.successnotification()"><i class="fa fa-eye"></i></a>')($scope)[0];
                }

Answer 2

You can define and register the callback (onSelectionChanged) in ag-grid:

var gridOptions = {
    columnDefs: columnDefs,
    suppressRowClickSelection: false, // Important! allow to select the rows
    rowSelection: 'single', // option, if you need only one row selected
    onSelectionChanged: onSelectionChanged  // callback
};

This callback will fire each time the selection of the ag-grid is changed. You can define the callback:

function onSelectionChanged() {
    var selectedRows = gridOptions.api.getSelectedRows();
    var selectedRowsString = '';
    selectedRows.forEach( function(selectedRow, index) {
        if (index!==0) {
            selectedRowsString += ', ';
        }
        selectedRowsString += selectedRow.athlete;
    });
    document.querySelector('#selectedRows').innerHTML = selectedRowsString;
}

The information is taken from official documentation: Link to documentation