printThis.js not picking correct table input values

Question

I'm using printThis.js to print a table in an angularJs application. Everything prints fine save for a column on the table that has inputs dynamically filled by angular (the entire table is populated by angular anyway).

This is a screenshot of the column before print with the intended values:

And this is a screenshot of the same table and column when I print:

As you can see, it takes one value and repeats it across all the other inputs. What could be causing this and how can I avert it?

The code for printing is pretty basic I don't see what could be affecting only these particular inputs while printing:

$('#printAll').on("click", function () {
      $('#allReports').printThis({
                debug: false,
            importCSS: true,
            importStyle: true,
            printContainer: true,
            loadCSS: "components/css/styles.css",
            pageTitle: "Termly Assesment Report",
            removeInline: false,
            printDelay: 333,
            header: null,
            formValues: true
      });
    });

And the problematic table column data is:

<td class="remarks double-border">
    <span>{{item.remarks}}</span>
    <input ng-show="!isPrinting" type="text" name="remarks" class="form-control" ng-model="item.remarks" readonly style="background-color:#ffffff;" />
</td>

Answer 1

printThis.js is using a a temporary iFrame to print the desired jQuery selector. So it adds all relevant DOM elements, including CSS stylesheets to the frames content. There is a good chance that this causes some problems with Angular and the data binding. I would recommend to discard printThis.js and simply use a print CSS stylesheet. There you can hide all elements you don't need in the print out.

As example css:

@media print {
   .header, .nav, .footer {
      display: none;
   }
}