Angularjs and dynamic html content in Datatables

I have an angular application where I have a Datatable. In the datatable, I change cell content to contain html content.

In the code below, I change the cell content of the 5th column to have links. I wish to have a tooltip that informs the user about the link. I am using UI Bootstrap.

var app = angular.module('smsmanagement', ['ngRoute', 'ui.bootstrap']);
app.controller('RecipientsController', function ($scope, $http, $routeParams, $timeout, SweetAlert) {

var groupID = $routeParams.param;

    $('#table-recipients-view').DataTable({
        sDom: "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "recipients/dt",
            "data": function (d) {
                d.groupID = groupID; 
            }
         },
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
              var groupLink = '';
              // The number of columns to display in the datatable
              var cols = 6;

              var rowElementID = aData[(cols - 1)];

              groupLink = '<a href="#smsgroups/' + rowElementID + '" uib-tooltip="View group(s)">' + noOfGroups + '</a>';

            // Create a link in no of groups column
              $(nRow).children('td:eq(' + (cols - 2) + ')').html(groupLink);

          }
      });
  });

I have added the uib-tooltip directive in groupLink html content.

The problem is the tooltip does not appear. I've heard of using $compile but I am not quite sure on how to use it.