Javascript (AngularJS) don't block UI during large DOM update -

in angular app, have operation has potential add tens of thousands of elements dom every time gets run (which happens every time user pastes new data textarea.

on occasions when has add, say, 20,000 table rows table, blocks whole page (spinning beach ball) ten seconds.

is there way around not have block ui? (a way besides not adding elements dom: since that's core functionality of particular app)

my next thought this: if hide table until in-memory dom manipulation done, show again?

because, know updating dom 2 stage process: 1) update elements in memory, 2) re-render affected section of page.

is possible receive callback after dom manipulation finished in memory?

any other thoughts?

thanks in advance!

edit: here relevant code

<table>     <tr ng-repeat="row in enormousarray">         <td ng-repeat="value in row">{{value}}</td>     <tr> <table> 

and javscript:

$scope.someeventshappen = function(datastring){     var my2darray = myservice.functionthatprocessesastringintoanarray(datastring);     $scope.enormousarray = my2darray; } 

note: 1) these aren't names of actual functions , variables in code, please no lectures naming conventions, , 2) i'm using 'controller as' in code, translated $scope simplicity's sake.

edit 2: after doing more reading, think next step create custom directive can control when , how data gets bound in link step. i'll post results here when finished, , if yields useful information.

try adding rows object instead of dom. when operation completed drop of changes dom @ once. if adding each element dom 1 @ time, browser has re-parse / re-draw 20,000 times. should try building table without touching dom.