AngularJs template request and $compile with ng-controller

This is a very old system, that we’re not in a spot to update to something modern… just wanted to get that out there.

I’m working on a project that is based on Angular 1.5. I’ve been tasked with allowing people to download a PDF version of all the pages/tabs visible to them on a website. I’m trying to use the built in tools of AngularJS but I’m hitting issues when a page has ng-model binds.

I have a download content page/tab where folks can download all the other pages. Defined as:

registrationModule.controller("dataDownload", function ($scope, $http, $q, $routeParams,
$location, viewModelHelper, $rootScope, $compile, $timeout, $templateRequest, $sce, $cookies) {

$scope.isLoading = true;
$scope.buttonsDisabled = false;
$scope.error = false;

var initPage = function () {
    $scope.isLoading = false;
};

initPage();

$scope.downloadContent = function (httpResponse) {

    var blob = new Blob([httpResponse.data], { type: "application/pdf" });
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);

    const fn = httpResponse.headers()['content-disposition'];
    if (fn) {
        link.download = fn.slice(fn.indexOf("=") + 1);
    } else {
        link.download = 'download.pdf';
    }

    link.click();
}

$scope.prepareContent = function (templateUrl, stringElement, pdfName) {
    $templateRequest(templateUrl).then(function (template) {
        var angularElement = angular.element(stringElement);
        
        $compile(angularElement.html(template).contents())($scope);
        

        $timeout(function () {

            const payload = {
                htmlContent: angularElement.html(),
                pdfName: pdfName
            };

            viewModelHelper.apiConfigPost('api/content-downloads/generate-pdf', payload, { responseType: "arraybuffer" },
                // creates PDF (THIS WORKS)
            );
        });
    });
}

$scope.downloadBio = function () {
    $scope.buttonsDisabled = true;
    $scope.error = false;

    var templateUrl = $sce.getTrustedResourceUrl('/App/Registration/Views/Bio.html');
    var stringElement = '<div data-bio></div>';
    $scope.prepareContent(templateUrl, stringElement, 'Bio');
};
});

The BIO view.html is define like:

<div class="row registrationInnerContent" ng-controller="bioModel">

    <input type="text" class="form-control full-width" ng-model="bio.Nickname">
    ... more ng-model binds ...
</div>

The BIO js model is defined like so:

registrationModule.controller("bioModel", function ($scope, registrationService, $http, $q, $routeParams, $window, $location,
    viewModelHelper, $rootScope, $cookies, toastrFactory, focus, $uibModal) {

    $scope.bio = null;
    
    ... other items not relevant ....

    var getBio= function () {
        viewModelHelper.apiGet('api/getbio/' + $rootScope.custId, null,
            function (result) {
                $scope.bio = result.data;              
            });
    }
    
    getBio();
});

How can I get my data download controller to successfully fill in the ng-model pieces of the BIO.html when using the $compile (and other) functions?