Embedding a dynamically generated QR Code in email using $cordovaSocialSharing

I’m using ngCordova’s $cordovaSocialSharing.shareViaEmail() to generate a pre-filled email.

In conjunction with this I’m using angulur-qr to create a QR code that has a job order number encoded in it.

I want to display the dynamically generated QR code in the email body and as such I place the element directive inside the div whose id is grabbed by $cordovaSocialSharing.shareViaEmail(). Everything else is working except my QR Code doesn’t show up.

In my controller I have this;

$scope.emailAppointment = function () {
    $scope.jobId = $scope.eventSource[0].repairDetails.id.toString();
    var wr = angular.element(document.getElementById('wr')).html();
    $cordovaSocialSharing.shareViaEmail(wr); 
}

and here is my template;

<ion-modal-view>
   <ion-content>
       <div id="wr">
            //qr is the directive element from angular-qr
            <qr size="200" input-mode="'ALPHA_NUM'" correction-level="'H'" ng-if="jobId" text="jobId" image="true" alt="Job ID QR Code" title="Job ID QR Code"></qr>
            <p>Scan upon job completion</p>
            <p><strong>Technician: {{ technicianNames[editAppointmentDetails.repairDetails.technician_id].firstName}}</strong></p>
            <p><strong>Equipment: {{ editAppointmentDetails.repairShopEquipmentID.repair_shop_equipment_name }}</strong></p>
	        <p>{{ editAppointmentDetails.repairDetails.repair_description }}</p>
	    <p>{{ editAppointmentDetails.startTimeDisplay }} - {{ editAppointmentDetails.endTimeDisplay }}</p>
        </div>
    <ion-content>
<ion-modal-view>

All of the QR encoding works when I grab the div#wr using ng-cordova Printer to print what would be the email body here. So I’m not sure what the problem is.