Шаблон div AngularJS на основе переменной

Ага. После долгих проб и ошибок:

<dmodal visible = "$root.showMiscModal">

</dmodal>

Файл шаблона:

<style>
@media (min-width: 768px) {
    .modal-dialog {
        width: 800px !important;
        margin: 30px auto;
    }
}

<span>this is the Status Changes template test4</span>
<div><span style = "float:left;width:150px">Name</span>&nbsp;<span style = "float:left; width:150px">Date</span>&nbsp;<span style = "float: left;     width:50px">Old</span>&nbsp;<span style = "float: left;     width:50px">New</span>&nbsp;Note</div>
<div ng-repeat = "s in statusChanges">
        <span style = "float:left;width:150px">{{s.Name}}</span>&nbsp;<span style = "float:left; width:150px">{{s.ChangeDate|date:"MM/dd/yyyy HH:mm"}}    </span>&nbsp;<span style = "float: left; width:50px">{{s.OldStatus}}</span>&nbsp;<span     style = "float: left; width:50px">{{s.NewStatus}}</span>&nbsp;{{s.Note}}
</div>

Директива:

angular.module("aps").directive("dmodal",
function($rootScope) {
    return {
       template:'<div class = "modal fade">' +
            '<div class = "modal-dialog">' +
            '<div class = "modal-content">' +
            '<div class = "modal-header">' +
            '<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">&times;</button>' +
            "</div>" +
            '<div class = "modal-body" ng-include = "selectedTemplate"></div>' +
            "</div>" +
            "</div>" +
            "</div>",

        restrict: "E",
        transclude: false,
        replace: true,
        scope: true,
        link: function postLink(scope, element, attrs) {
            scope.$watch(attrs.visible,
                function(value) {
                    if (value === true)
                        $(element).modal("show");
                    else
                        $(element).modal("hide");
                });

            $(element).on("shown.bs.modal",
                function() {
                    scope.$apply(function() {
                        scope.$parent[attrs.visible] = true;
                    });
                });

            $(element).on("hidden.bs.modal",
                function() {
                    scope.$apply(function() {
                        scope.$parent[attrs.visible] = false;
                        $rootScope.showMiscModal=false;
                    });
                });
        }
    };
});

Функции:

$scope.showInternalNotes = function() {
    $rootScope.showMiscModal = true;
    $scope.selectedTemplate = "/desktopmodules/mvc/TechSheetMaint/AngularTemplates/InternalNotes.html?"+Math.floor((Math.random() * 10000000) + 1);
    $scope.getStatusChanges()
};

$scope.showCustomerContact = function() {
    $rootScope.showMiscModal = true;
    $scope.selectedTemplate= "/desktopmodules/mvc/TechSheetMaint/AngularTemplates/CustomerContact.html?"+Math.floor((Math.random() * 10000000) + 1);
    $scope.getStatusChanges()
};

$scope.showStatusChanges = function() {
    $rootScope.showMiscModal = true;
    $scope.selectedTemplate = "/desktopmodules/mvc/TechSheetMaint/AngularTemplates/StatusChanges.html?"+Math.floor((Math.random() * 10000000) + 1);
   $scope.getStatusChanges();
};

Аякс:

    $scope.getStatusChanges = function() {
        const deferred = $q.defer();
        const successFunction = function(response) {
            if (!checkLogin(response, "getStatusChanges")) return;
            $scope.statusChanges = response.data;
            //alert(JSON.stringify(response.data));
            deferred.resolve();
        };

        const failureFunction = function(data) {
            console.info(`Error${angular.toJson(data)}`);
            deferred.reject();
        };
        TechSheetFactory.getStatusChanges(successFunction, failureFunction,$scope.TechSheetInfo.WorkOrder.WorkOrderID);
        return deferred.promise;
    };