I have a timer that runs in a web worker with a 10 millisecond interval. Each time the timer ticks, a function is called in the controller which increments a variable. This variable is used by a bootstrap progress bar on my page.
The problem that I'm encountering is that the progress bar doesn't update unless I call $scope.$apply() in the function call where the value gets updated.
Meanwhile, I have an array with a bunch of complex objects in them (100+ objects) that are on the $scope. Since I need to call $scope.$apply() in order to have the view take the changes every time my timer ticks, it's also updating this list of objects (every 10ms), which is slowing down my application.
Does anyone have any ideas as to how I could potentially resolve this issue? Please let me know if I can provide additional details.
If the elements for the 100+ objects aren't all actually visible on screen at any one time, you can only include the ones on screen in the DOM (and so only have watchers for them) by using something like https://github.com/kamilkp/angular-vs-repeat (a colleague of mine had to hack it slightly to get it to do exactly what was needed: I forget the details)