AngularJS and Apps for Office Integration Issues

I was looking into Microsoft’s Apps for Office and, of course, wanted to use AngularJS to make the project more fun an easy to build. The moment I added Angular routing, my Office project started breaking. I could still run the web project by itself but when I started the actual App for Office, it gave me the error 10 $digest() iterations reached. It said:

0x800a139e - JavaScript runtime error: 
[$rootScope:infdig] 10 $digest() iterations reached. 
Watchers fired in the last 5 iterations: 
[["fn: function $locationWatch()...

Obviously, I searched and Googled and Binged but nothing. I spend a few hours trying things with no success. Then, I stumbled at the only place someone mentioned Apps for Office and Angular with such an error. Somewhere on MSDN, in-between many replies on another issue, a guy profiled as N. Dresselhaus mentioned two functions related to browser history that cause the issue. After some playing with the code, I figured that was it. Because Office apps use whatever IE you have installed but don’t have the same webpage history, they fail on pushState() and replaceState(). This creates a circular call to a function and, luckily, AngularJS traps that so we don’t go into infinite loops. It throws the above error.


Simple enough, setting those two functions to null fixes the break. You can put the following two lines anywhere in your JS code, as long as it executes before Angular does.

history.pushState = null;
history.replaceState = null;

Thank you, N. Dresselhaus! Even it was your only post there, I am sure you will save people some valuable time.