AngularJS and DataTables (Icons each line)

Hello,

I am using DataTables with AngularJS. I have found a good example on the web. But I have been had difficulties for to put the icons(PDF, EXCEL) in each line. I tryed to use function in mData and mRender, but it does not works.

Follows my code for better understanding:

Directives AngularJS:

var tableExampleApp = angular.module('tableExample', ['icons']);
	var iconApp = angular.module('icons', []);

	iconApp.directive('iconPdf', function() {
		return {
			restrict:'E',
			template:'<b>PDF</b>'
		}

   
    });

    tableExampleApp.directive('myTable', function() {return function(scope, element, attrs) {

            // apply DataTable options, use defaults if none specified by user
            var options = {};
            
            if (attrs.myTable.length > 0) {
                options = scope.$eval(attrs.myTable);
            } else {
                options = {
                    "bStateSave": true,
                    "iCookieDuration": 2419200, /* 1 month */
                    "bJQueryUI": true,
                    "bPaginate": false,
                    "bLengthChange": false,
                    "bFilter": false,
                    "bInfo": false,
                    "bDestroy": true
                };
            }

            // Tell the dataTables plugin what columns to use
            // We can either derive them from the dom, or use setup from the controller           
            var explicitColumns = [];
            
            element.find('th').each(function(index, elem) {
                explicitColumns.push($(elem).text());
            });
            
            if(explicitColumns.length > 0) {
                options["aoColumns"] = explicitColumns;
            } else if (attrs.aoColumns) {
                options["aoColumns"] = scope.$eval(attrs.aoColumns);
            }

            // aoColumnDefs is dataTables way of providing fine control over column config
            if (attrs.aoColumnDefs) {
                options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);
            }
            
            if (attrs.fnRowCallback) {
                options["fnRowCallback"] = scope.$eval(attrs.fnRowCallback);
            }

            // apply the plugin
            var dataTable = element.dataTable(options);

            
            
            // watch for any changes to our data, rebuild the DataTable
            scope.$watch(attrs.aaData, function(value) {
                var val = value || null;
                if (val) {
                    dataTable.fnClearTable();
                    dataTable.fnAddData(scope.$eval(attrs.aaData));
                }
            });
        };
        
    });

Controller AngularJS:

function Ctrl($scope, $http, $window) {

    	$scope.message = '';

		var init = function(){

			$http.get('/rest/reports', {headers: {'Accept': 'application/json'}}).success(function(data, status, headers, config){
				$scope.reports = data.reportDesign;
			});
			
			$scope.STATUS = 'RUNNING';

		}();

		var checkFormat = function(id, format){

			var data = {
				designId:id,
				format:'pdf'
			};

			$http.post('/rest/reports/tasks', null, {headers: {'Accept': 'application/json','designId':id,'format':'pdf'}})
			
			.success(function(data, status, headers, config){

				var urlReport = headers().location;

				if(status==201){

					//alert(urlReport);

					while($scope.STATUS != 'DONE'){
						$scope.checkGenerationReport(urlReport);
						alert($scope.STATUS); 
					}
					
					$window.location = urlReport;

				}
				
				/*
				for (var key in x) {
				   var obj = x[key];
				   for (var prop in obj) {
				      //alert(prop + " = " + obj[prop]);
				   }
				}
				*/
				

				
				

			})
			.error(function(data, status){
				alert(data);
				alert(status);
			});

		};
		

		
		$scope.checkGenerationReport = function(urlReport){
		
		
			$http.get(urlReport, {headers: {'Accept': 'application/json'}})
				.success(function(data, status, headers, config){
					//alert(data.state);
					$scope.STATUS = data.state;
				})
				.error(function(data, status, headers, config){
					alert('erro')
				})
				;

		};
		


        $scope.myCallback = function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {

            $('td:eq(4)', nRow).bind('click', function() {
                $scope.$apply(function() {
                    $scope.someClickHandler(aData);
                });
            });
            return nRow;
        };

        $scope.someClickHandler = function(info) {
            $scope.message = 'clicked: '+ info.id;
            checkFormat(info.id, 'pdf');
        };
    
        $scope.columnDefs = [
            { "bSearchable":false, "mDataProp": "@uri", "aTargets":[0]},
            { "bSearchable":false, "mDataProp": "id", "aTargets":[1]},
            { "bSearchable":true, "mDataProp": "title", "aTargets":[2] },
            { "bSearchable":false, "mDataProp": "count", "aTargets":[3] },
            { "sDefaultContent": "", "aTargets":[-1], 

				"mData": function () {return "PDF"}}

        ];

        $scope.overrideOptions = {
            "bStateSave": false,
            "iCookieDuration": 2419200, /* 1 month */
            "bJQueryUI": true,
            "bPaginate": true,
            "bLengthChange": false,
            "bFilter": true,
            "bInfo": true,
            "bDestroy": true,
            "bAutoWidth": false,
            
        };

            
}

My HTML:

<body ng-app="tableExample">
<div>

    <div ng-controller="Ctrl">   

        <table style="width:100%" my-table="overrideOptions" aa-data="reports" ao-column-defs="columnDefs" fn-row-callback="myCallback">
            <thead>
            <tr>

                <th>URI</th>
                <th>Id</th>
                <th>Title</th>
                <th>Count</th>
                <th>#</th>
            </tr>
            </thead>
            <tbody>
				<tr ng-repeat="rep in reports">
				</tr>
            </tbody>
        </table>

       {{message}}
    </div>
</div>
</body>

This point is where I am trying to change:

        $scope.columnDefs = [
            { "bSearchable":false, "mDataProp": "@uri", "aTargets":[0]},
            { "bSearchable":false, "mDataProp": "id", "aTargets":[1]},
            { "bSearchable":true, "mDataProp": "title", "aTargets":[2] },
            { "bSearchable":false, "mDataProp": "count", "aTargets":[3] },
            { "sDefaultContent": "",	 "aTargets":[-1], 

				"mData": function () {return "PDF"}}

        ];

I would like to put icons like standard grids (EDIT, DELETE), but I am going to use icons PDF, EXCEL and HTML. When the user to click on the icon it will call a function Javascript passing parameters.