How to make 2 Angular Lists appear next to each other in a html table
<p>I am having a problem where when I run this code which reads data from 2 files both containing 10 numbers. These are both stored seperately in the mainlist but the only problem is when I try to output them into a table, instead of putting each one under its title it just puts both under the "List1" title in a 20 long list. So how do I make <code>mainlist[0]</code> appear under list 1 and <code>mainlist[1]</code> under list 2. Sorry that my code is very messy and very basic as I have only just started learning JS and Angular.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="Tables"&gt;
  &lt;table&gt;
   &lt;tr&gt;
    &lt;th&gt;List1&lt;/th&gt;
    &lt;th&gt;List2&lt;/th&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;tr ng-repeat="i in mainlist[0]"&gt;
     &lt;td&gt;{{i}}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr ng-repeat="i in mainlist[1]"&gt;
     &lt;td&gt;{{i}}&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tr&gt;

  &lt;/table&gt;
     &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/xz8pf7uk/" rel="nofollow noreferrer">JSfiddle</a></p>