Animated GIFs not playing in Firefox when loaded via AngularJS
<p>I'm a beginner with Angular 1. I have a function in my controller that generates URLs to various animated GIF files depending on some parameters in an HTML form. I then have an <code>img</code> tag that is supposed to show that GIF file, like this:</p>

<pre><code>&lt;img alt="preview" src="{{ctrl.previewURL()}}"/&gt;
</code></pre>

<p>Basically, it works. When I change the values in my input fields, the image gets updated accordingly. However, after the third image loaded this way, the GIFs stop playing their animations (though the correct files are still being loaded), only showing one frame. This happens no matter what order I try to load them in, so it's not a problem with the files themselves.</p>

<p>Interestingly, this problem only seems to appear in Firefox (I'm using version 48). It all works flawlessly in Microsoft Edge. I didn't have the chance to try other browsers yet.</p>

<p>Is there a way to get this to work in Firefox as well? Or is there a better practice for doing something like this with Angular?</p>