title: how to auto detect page break on the client with angularjs
body: <p>Is there any way to detect where the page break would be and change my data accordingly, not with the media print but on the client?</p>
  
  <p>ie, i have a table with many rows, if i add another row the page break with change.</p>
  
  <p>see the plunker.
  <a href="https://plnkr.co/edit/mDOGtpDSfmwhCjK15PMO?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/mDOGtpDSfmwhCjK15PMO?p=preview</a></p>
  
  <p>the page will break on row 29, if i add a row on table1 OR on table2 the page break should still be on row 29.</p>
  
  <p>click the print to see the result.</p>
  
  <p>currently i have a ng-repeat with the following code for adding a line.</p>
  
  <pre><code>$scope.add = function(index, table){
      var array = angular.copy($scope[table]);
      var nextId = array.length + 1 ;
      $scope[table].splice(index, 0,{id:nextId, name:'new line'})
    }
  </code></pre>
  
  <p>What i am trying to accomplish is to show on the client an accurate representation of what the print out would be. </p>
  
  <p>therefore if i can detect when the page break WILL be (depending on the data), i can arrange the css of the client to represent the print out.</p>
  
  <p>i hope that makes sense
  any ideas on how to go about it?</p>
  
  <p>CLARIFICATION:  I am not asking on how to use page-break-inside and @media print because that reflects only the printout.</p>