Как заставить angularjs выполнить фазу компиляции? ng-grid не загружается, когда пользовательская директива, которая в конечном итоге отображает ng-grid

Question

У меня есть эта пользовательская директива, которая в основном ищет идентификатор объекта / имя поля и значение для него и делает внутренний вызов, чтобы получить выгружаемые данные.

Теперь, чтобы показать эти данные, я использую ng-grid, добавив

<div class="row-fluid gridStyle" ng-grid="gridOptions"/>

после успешного отдыха позвоните. У ng-grid есть функция компиляции, которая не выполняется.

Так как я могу заставить angular выполнить его фазу компиляции.

код ниже:

app.directive("historyGrid", ['NgPageNumberNumberFix', 'AuditService',    'appConfig', function(NgPageNumberNumberFix, AuditService, appConfig){

return {
    restrict : 'E',
    scope :{
        entityIdName : '@',
        idVal : '='
    },
    link : function ($scope, elem, attrs) {
        var name = $scope.entityIdName;
        var value = $scope.idVal;
        alert('called '+$scope.entityIdName+' : '+$scope.idVal);
        $scope.pageOptions = {
            pageSizes: [5, 10, 25, 50, 75, 100],
            pageSize: 5,
            currentPage: 1,
            pageSizeDifference: 25 //The difference in which pageSizes[] progression happens to be.
        };

        $scope.filterOptions = {
            filterText: "",
            useExternalFilter: true
        };
        var templateWithTooltip = '<div  title="{{row.getProperty(col.field)}}">{{row.getProperty(col.field)}}</div>';
        var columnDefs = [
            {field: 'number', displayName: '#', enableCellEdit: false, width: "4%",
                cellTemplate: '<div style="text-align:center;"  class="ngCellText">{{pagingOptions.pageSize*(pagingOptions.currentPage-1)+row.rowIndex+1}}</div>'},
            {field: 'lastChangedDate', displayName: 'DATE TIME', width: "15%", cellFilter: 'date:"yyyy-MM-dd, hh:mm a" '},
            {field: 'user.name', displayName: 'USER', width: "20%"},
            {field: 'auditActionType', displayName: 'ACTION', width: "18%"},
            {field: 'auditMessage', displayName: 'DESCRIPTION', width: "43%", cellTemplate: templateWithTooltip}
        ];

        var getSearchFieldDto = function() {
            var field = {
                "name": name,
                "value": value
            };
            var searchFieldDto = {
                fields: [field],
                pageSize: $scope.pageOptions.pageSize,
                page: $scope.pageOptions.currentPage - 1,
                sortBy: 'lastChangedDate',
                sortDir: 'desc'
            };
            return searchFieldDto;
        };

        var getPage = function() {
            if(!value) {
                return;
            }
            AuditService.postAuditData(getSearchFieldDto()).then(function(searchResult) {
                var sortFn = function(a, b) {
                    var dateA = Date.parse(a.lastChangedDate);
                    var dateB = Date.parse(b.lastChangedDate);
                    if(dateA < dateB) {
                        return 1;
                    }
                    if(dateA > dateB) {
                        return -1;
                    }
                    return 0;
                };
                $.each(searchResult.data.results, function(i, val){
                    val.lastChangedDate = Date.parse(val.lastChangedDate);
                });
                $scope.historyData = searchResult.data.results;
                $scope.totalServerItems = searchResult.data.totalCount;
                elem.append('<div class="row-fluid gridStyle" ng-grid="gridOptions"/>');
                $scope.$apply();
            });
        };

        $scope.gridOptions = {
            multiSelect: false,
            data: 'historyData',
            enablePaging: true,
            showFooter: true,
            totalServerItems: 'totalServerItems',
            enableRowSelection: false,
            enableColumnResize: true,
            pagingOptions: $scope.pageOptions,
            filterOptions: $scope.filterOptions,
            plugins: [new NgGridFlexibleHeightPlugin()],
            columnDefs : columnDefs,
            sortInfo: {fields:['lastChangedDate'], directions:['desc']}
        };
        getPage();

        $scope.$watch('pagingOptions', function(newVal, oldVal){
            alert("Changed paging options");
        });
    }
};

РЕДАКТИРОВАТЬ 1: Хорошо, я получил это, просто сделай это,

var el = $compile('<div class="row-fluid gridStyle" ng-grid="gridOptions"/>')( $scope );
elem.append(el);

но теперь нг-сетка просто искажается. Любая идея, как это исправить сейчас.