jsFiddle : http://jsfiddle.net/ADukg/4766/
I've written some basic angular code which actually works properly, and I get the desired result and ouput. However, I get some errors in my console which keep looping and eventually crash the browser. I've read some similar problems here, but can't seem to get a solution to work with my code.
Can anyone figure out what is going wrong and how to fix?
Error: 10 $digest() iterations reached. Aborting!
From your function, you must return a stable object (or near stable). Because you var new objects in the getBreakdown function, angular thinks they're new and puts them in the scope with new hashkeys.
Angular then runs this $digest again, to check to make sure nothing has changed... but it sees new objects and assumes that the model is not stabalized. It runs it again... and gets new objects again... and again... and again.
The moral of the story is you shouldn't create new model inside a function assigned to scope.
If you don't need live-binding, just transform this var into a new $scope var just once, don't bind to the function. If you need live binding, I think the solution for you is to use a filter.
btw... add a console.log(breakdown) right before your function returns, inspect each object inside the array and you'll see it outputs 10 times, each $$hashkey value is different. Angular uses the $$hashkey to keep track of objects. I think it'll be easier to understand how you're confusing it.
The example I use to teach people this concept is a function that returns a random number. If you try to bind to that function... angular will digest it 10 times each time getting a new random number and never stablizing. Angular won't know it's done digesting... ever. So thats why they limit it to 10.
