How to show bootstrap tooltip dynamic data where tooltip has html content - angularjs

Question

I am trying to load data from the grid inside tooltip. This tooltip is generated once the user hovers on first column inside ui-grid. I want to use bootstrap and html of tooltip is displaying as required. I have tried several ways but now the data is not showing.
Please see the attached picture. I want actual value of {{row.entity.Status}}
Please see the current code for reference
https://codepen.io/brainzest/pen/bmqgLy?editors=0011
angular.module('GridDemo', ['ngTouch', 'ui.grid', 'ui.grid.cellNav', 'ui.grid.pinning']).controller('MainCtrl', function($scope,uiGridConstants,$sce){
$scope.equipData = [
{ Status: "Maintenance",
PackageName: "Package 1",
Hours: "15,000",
},
{ Status: "Running",
PackageName: " Package 2",
Hours: "15,000",
},
{ Status: "Running",
PackageName: "Package 3",
Hours: "15,000",
},
{ Status: "Running",
PackageName: "Package 4",
Hours: "15,000",
},
];
$scope.gridOptions = {
enableSorting: true,
enableColumnResizing : true,
enableColumnMenus:false,
columnDefs: [{ field: 'PackageName', cellTemplate:'<div data-toggle="tooltip" title="\<table class=table-borderless><tbody><tr><td class=gray>Status</td><td class=yell>Data 2</td></tr><tr><td class=gray>Status</td><td class=yell>{{row.entity.Status}}</td></tr></tbody></table>" data-html="true" data-placement="right" ><div class="ui-grid-cell-contents">{{ COL_FIELD }}</div></div>'},
{ field: 'Hours'}],
data:$scope.equipData
};
}).directive('toggle', function(){
return {
restrict: 'A',
link: function(scope, element, attrs){
if (attrs.toggle=="tooltip"){
$(element).tooltip();
}
}
};
});

Answer 1

if you are looking for something more angular you should do it this way:
<div class="grid-tooltip" tooltip="{{row.entity.Status}}" tooltip-placement="left">
<div class="ui-grid-cell-contents">
{{ COL_FIELD }}
</div>
</div>