How to create page numbering using HTML print

Question

I need to print a document that is generated dynamically, with a list of tables that contains some lists of elements. Some of these lists may have literally multiple pages, other lists may have only one element.

I tried using the CSS page counter, but this counter is not incremented when the page breaks. I tried to count the elements that repeat to each page, even after the page breaks, like H2, but it still didn’t work. I tried to identify some element within my code and try to count it, but it didn’t work, because when the page is generated, HTML doesn’t recognize the A4 sheet sizes, so it doesn’t recognize the breaks and so on. I tried to count but it didn’t work.

Follow the code of my table.

    <div class="page" style="page-break-after:always">
    <div class="row" style="text-align:center">
        <h2>Some title</h2>
        <h4>Subtitle</h4>
    </div>
    <div class="row">
        <p>
            This book contains {{numberPages}} numbered pages.
        </p>
    </div>
    <div class="row">
        {{dataPrint.city}}, {{dataPrint.today}}
    </div>
</div>
<div class="page">
    <div class="row">
        <table style="border:0!important;" ng-repeat="item in dataPrint.register">
            <thead>
                <tr>
                    <td colspan="8" style="border:0!important">
                        <h2 style="text-align:center">Title of document</h2>
                        <h3>{{ item.name }}</h3>
                    </td>
                </tr>
                <tr>
                    <th rowspan="2">Date</th>
                    <th rowspan="2">Log</th>
                    <th colspan="3">Move</th>
                    <th rowspan="2">Stock</th>
                    <th rowspan="2">Sign</th>
                    <th rowspan="2">Obs</th>
                </tr>
                <tr>
                    <th>Entry</th>
                    <th>Exit</th>
                    <th>Loss</th>
                </tr>
            </thead>
            <tbody style="border:0!important">
                <tr ng-repeat="register in item.move">
                    <td>{{ register.date_modify }}</td>
                    <td>{{ register.log}}</td>
                    <td>{{ register.entry }}</td>
                    <td>{{ register.exit}}</td>
                    <td>{{ register.loss}}</td>
                    <td>{{ register.stock}}</td>
                    <td></td>
                    <td>{{ register.Obs}}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="8" style="border:0!important">
                        <div class="footer-space" style="border:0!important" id="page-number">
                        </div>
                    </td>
                </tr>
            </tfoot>
        </table>
        <div class="footer" id="pageFooter" style="text-align:center;">

        </div>
    </div>
</div>
<div class="page" style="page-break-before:always">
    <div class="row" style="text-align:center">
        <h2>Some title</h2>
        <h4>Subtitle</h4>
    </div>
    <div class="row">
        <p>
            This book contains {{numberPages}} numbered pages.
        </p>
    </div>
    <div class="row">
        {{dataPrint.city}}, {{dataPrint.today}}
    </div>
</div>

Thank you