Angular print service timeout issue for multiple print - angularjs

Question

var userServicePromise = UserService.printBarCodes(sampleId);
userServicePromise.then(function(response) {
if (response != null && response.data != null && response.data.result != null) {
response.data.result.forEach(function(entry) { //three values in the array, iteraring three times.
$timeout(function() {
vm.barCodeImage = angular.copy(entry);
$timeout(function() {
PrintService.printElement("printThisElement"); // display one value three times
}, 1);
}, 2);
});
} else {
toaster.error(response.data.message);
}
});
using print service to print the div, values of the div are populated using the variable(vm.barCodeImage).
But here one value is displaying all the time in the print. tried adding time out interval after the for each, but no luck.
//print service code
(function() {
'use strict';
angular.module('app.services')
.factory('PrintService', PrintService);
PrintService.$inject = [];
function PrintService() {
var service = {
printElement: printElement
};
return service;
function printElement(elem) {
var printSection = document.getElementById('printSection');
// if there is no printing section, create one
if (!printSection) {
printSection = document.createElement('div');
printSection.id = 'printSection';
document.body.appendChild(printSection);
}
var elemToPrint = document.getElementById(elem);
// clones the element you want to print
var domClone = elemToPrint.cloneNode(true);
printSection.innerHTML = '';
printSection.appendChild(domClone);
window.print();
window.onafterprint = function() {
printSection.innerHTML = '';
}
};
}
})();
The expected result for this should be three different print(suppose loop size is 3, it should be 7858,7859,7860), but here it displays all same.
printThisElement id is an HTML.
<div id="printThisElement" class="onlyprint" >
<table>
<tr>
<td>{{ ctrl.instCode }}</td>
<td align="center">{{ ctrl.date | dateDisplayFilter}} </td>
</tr>
<tr>
<td colspan="2" align="center"> <img ng-src="data:image/JPEG;base64,{{ctrl.barCodeImage}}"> </td>
</tr>
<tr>
<td colspan="2" align="center">{{ ctrl.user.name }} </td>
</tr>
<tr>
<td >Reg Id: {{ ctrl.regIdLookup }}</td>
<td align="center">{{ ctrl.testName }}</td>
</tr>
</table>
</div>

Answer 1

Ok, I supposed your binding is wrong. printThisElement refer to single data in controller. So if you have multiple entries, it must be an array.
I suggest to you to use a directive instead of a service to print element in DOM.
I create a little plunker to illustrate it : https://plnkr.co/edit/QvmqV88wZCYbsehMWh3W?p=preview
This plunker show how from an array resulting of calling an async service you can display all entries.
The directive is very simple :
.directive('print', function() {
return {
restrict: 'E',
scope: {
data: '='
},
template: '<div id="printThisElement" class="onlyprint" ><table><tr> <td>{{ data.instCode }}</td></tr><tr><td>... Other values in data ...</td></tr></table></div>',
}
})
The template of the directive is your printThisElement id. With this way you can display multiple result isolate by directive.
Hope this will help you
Edit : Solution for the problem was report on this stack Inconsistent Data on multiple page printing on a printer