Is there any way to tell Angular to just temporarily stop updating the DOM?

Question

Use case is that we've got a page with lots of Angular. Sometimes we pop up a modal, and as the user interacts with the modal, it sends messages that result in the the main page (which is behind a semi-transparent overlay, but still partially visible) updating.

This is distracting, and I'd like to "lock" the main page while the modal is open.

I could do this by having some property on $rootScope and making the individual Angular controllers aware of that, but I really want to just select the DOM elements on the main page and essentially unhook their scopes from them temporarily, and then re-hook them when the modal closes.

Answer 1

Create a copy of your data using

$scope.modalData = angular.copy($scope.originalObject);

then update this object on the modal. Once you are ready to close the modal, at that step copy the data back to the DOM scope object.

$scope.originalObject = angular.copy($scope.modalData);