How to display page number and total pages to print HTML

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 can have literally pages, other lists can have just one element.

I tried to use the CSS page counter, but this counter doesn't increment when the page breaks. I tried to count elements that repeat each page, even after the break, like H2, but it still doesn't work. I tried to identify some element inside my code and try to count this, but it still doesn't work for me.

<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>

I don't know if it is possible, but anybody have some tip for me? I am using javascript and angularJS and I can't change the technology.

The page behaves like the list of elements were one page, even when it breaks to print. I tried to count this breaks but I don't know if it is possible.

Thanks a million!