IE8 crashes with AngularJS and dynamic content

Question

I have the following code:

<blockquote class='mt20'>
    <p><span>&ldquo;</span><span>{{iq.quote}}</span><span>&rdquo;</span></p>
    <footer><cite class="dark-grey">{{iq.author}}</cite></footer>
</blockquote>

For some reason, this is causing IE8 to crash. I've done a lot of debugging and have found that when the the iq object contains just the quote:

{quote:"some quote"}

the browser doesn't crash. It only crashes with both quote and author.

I use a special function to get my data. It looks like:

this.get = function(){
    var arr = {};
    if(!arr.length){
        $http.get('url').success(function(data){
            $.extend(arr, data);
        });
    }
    return arr;
}

I use this because the object is automatically bound so I don't have to watch it. It appears that the crash happens on the extension of the data to the object when the view tries to update. Any thoughts?

Answer 1

I was able to fix this by changing from content bindings using {{}} to ng-bind.

<blockquote>
    <p><span>&ldquo;</span><span ng-bind="iq.quote"></span><span>&rdquo;</span></p>
    <footer><cite ng-bind="iq.author"></cite></footer>
</blockquote>

I have a hypothesis that the HTML5 footer element, combined with the {{}} content binding and the dynamic update caused a memory leak that crashed IE8 but I can't prove this. I do know that when the content is set and not changed (like what would happen if you used $http.get instead of my method), the browser doesn't crash. I also was using:

var obj = {}

and:

delete obj.key

I changed this to:

var obj = new Object()

based on this post: https://markfeimer.wordpress.com/2014/05/23/internet-explorer-8-javascript-delete-keyword-bug/