page-break is not working

Question

I'm stuck at a sequential page break. I know that there are quite a few topics about them, but I'm really stuck. What I want to do is iterate over "routes" using angular. After every route there should be a page break. The iteration works like a charm but the page-break doesn't.

I've read quite a few articles on the internet like this, this and this. I develop in Chrome but have also tried it using Firefox. It is not working though. I tried using the page break as inline css as well as using an external css file. (On Google Chrome the elements show the page break property when inspecting using the developer tools). I avoid using the page break on elements that float and when inside tables.

This is what I have (page break on line 3):

<div>
<div class="routeIterator" ng-repeat="route in routes">
    <div style="page-break-after:always;">
        <div class=" route" ng-repeat="stop in route.stops">

            <div class="header" ng-show="$index % 10 == 0">
                <table>
                    <tr>
                        <th></th>
                        <!--*/etc */ -->
                    </tr>
                    <tr>
                        <td>Datum: {{route.date }}</td>
                       <!--*/etc */ -->
                    </tr>                        
                </table>
            </div>

            <div class="content">
                <div class="titles" ng-show="$index % 10 == 0">
                    <ul>
                        <li class="first">time</li>
                        <!--*/etc */ -->
                    </ul>
                </div>

                <div class="stops">
                    <ul>
                        <li class="first"><p>{{stop.time}}</p></li>
                        /*etc */
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>