This afternoon I encountered a race condition in an Angular app I'm working on. Essentially my controller was pushing some values to an Array on its scope and something (I wasn't sure what) was asynchronously overriding the Array's contents. The Array was being used by a custom directive- written by someone else- as well as an ngModel
and it wasn't clear who was making the change.
I ended up trying something I had not done before and it worked well enough that I thought I'd post it here in case it helped anyone else.
First I enabled The "Async" option in Chrome's "Sources > Call Stack" panel.
Next I set a breakpoint in my controller where I was modifying the Array. When I hit that breakpoint, I ran the following code in my console:
Object.observe(this.theArray, function(changes) {