How to render a variable containing `new Image()` in AngularJS ng-repeat?
<p>I have an array that looks like this:</p>

<pre><code>var imageList = [ image1, image2, image3 ];
</code></pre>

<p>Each element in this array is a variable containing <code>new Image()</code>. 
For example: <code>var image1 = new Image()</code>.</p>

<p>I preload each image using <code>.onload</code> event for each element after setting its url. Only after all the images have been loaded, that anything else can happen.</p>

<p>How do I output each array element in AngularJS and show the image?</p>

<pre><code>&lt;li ng-repeat="image in imageList"&gt;
   {{ image }}
   /* I want the expected output of the above line to look like
      &lt;img src="./img/xx.svg" /&gt; */
&lt;/li&gt;
</code></pre>

<p>I don't want to do anything like the code below since I already created each element in the array as a new Image():</p>

<pre><code>&lt;li ng-repeat="image in someImageList"&gt;
   &lt;img ng-src="{{ image.url }}" /&gt;
&lt;/li&gt;
</code></pre>

<p>The current output if I do <code>{{ image }}</code> is just list of {}. If use just <code>image</code>, the output is a list of "image" string.</p>

<p>The reasons why I'm creating new image elements using JavaScript instead of using the <code>&lt;img/&gt;</code> tag are that 1. I need to preload the images and 2. I need to draw these images in <code>&lt;canvas&gt;</code>. It's redundant to create <code>&lt;img/&gt;</code> for the same image sources. Also, it makes opening for a modal that shows a list of these images very slow to open. So if the images are preloaded already, the modal <em>might</em> open faster.</p>