Loading custom directive from controller using $compile service

[Shweth]

Hello,

I am using angular-datatables plugin to apply the datatable. when i am rendering the html string (custom directive) using renderWith function. the directive getting called and i am unable to load the template in the custom directive tag instead i am getting only the custom directive tags.

please look at the below controller code and directive code

controller

`
module.controller("LocationController", ["$scope", 'LocationServices', 'GlobalConstants', 'DTOptionsBuilder', 'DTColumnBuilder', '$compile', function ($scope, LocationServices, GlobalConstants, DTOptionsBuilder, DTColumnBuilder, $compile) {

    //GetLocations();
    var lm = this;
    $scope.location = {};
    $scope.isLabelShow = true;
    //#region datatable prparing
    $scope.standardOptions = DTOptionsBuilder
    .fromSource(GlobalConstants.Url + "IncidentResolution/GetAllLocations")
            //Add Bootstrap compatibility
            .withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
            "t" +
            "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
            .withBootstrap();  

$scope.standardColumns = [
DTColumnBuilder.newColumn('LocationID').withClass('text-danger'),
DTColumnBuilder.newColumn('Name').renderWith(function (data, type, full, meta) {
debugger;
var html = ReturnColumnHtml();
return html; }),
DTColumnBuilder.newColumn('Edit').renderWith(function (data, type, full, meta) { return " " }),
DTColumnBuilder.newColumn('Delete').renderWith(function (data, type, full, meta) { return " " })
];

    function ReturnColumnHtml() {
        return ($compile("<div><locationname></locationname></div>")($scope)[0]).innerHTML;
    }

}])`

When scope trying to render the column html string - custom directive gets called for the first time and it is displaying the html string as it given but the template is not getting displayed even it is getting called to load the template

Directive

.directive("locationname", function ($compile) {
debugger;
return {
restrict: "E",
templateUrl: Urls.LocationNameUrl,
transclude: true,
compile: function (elements, attrs) {
},
link: function (scope, element, attrs) {
debugger;
console.log(element);
//$compile(element)(scope);
}
}
})

Template

`{{location.Name}}

<div class="col col-sm-1">
    <a href="javscript:void(0);" ng-click="updateLocation(location)"><i class="fa fa-check"></i></a>
</div>
<div class="col col-sm-1">
    <a href="javscript:void(0);" ng-click="edithide(location)" style="color:red"><i class=" fa fa-times"></i></a>
</div>

`

Please help me out.