Angular app with jquery-confirm. How to interpolate the select in the modal?
<p>I am working on an Angular page. When user clicks on a link, a modal pops up using jquery-confirm. In the modal, there will be a select dropdown.</p>

<p>The length of options will depend on the particular user. If the user has many groups, the dropdown will be longer. </p>

<p>getAllGroups makes an HTTP GET request and returns an object called res with an array of group objects.</p>

<p>group_names is an array of group names</p>

<p>I have problems interpolating this array in to $.confirm</p>

<pre><code>getGroups_request = AppService.getAllGroups( token )
  getGroups_request.promise.then (res) -&gt;
    group_names = res.data.map (m) -&gt;
      m.name
    $.confirm
      title: 'Select a group'
      content: '&lt;select id="target"&gt;&lt;/select&gt;&lt;script&gt;$.each(['+group_names+'], function(index, data){$("#target").append("&lt;option&gt;"+data+"&lt;/option&gt;");});&lt;/script&gt;'
</code></pre>

<p>Let's say, group_names=["aaa","bbb","ccc"]</p>

<p>When I run this, the chrome console would say </p>

<pre><code>ReferenceError: aaa is not defined
</code></pre>

<p>However, if I hard code the array in $.each like this</p>

<pre><code>content: '&lt;select id="target"&gt;&lt;/select&gt;&lt;script&gt;$.each(["aaa","bbb","ccc"], function(index, data){$("#target").append("&lt;option&gt;"+data+"&lt;/option&gt;");});&lt;/script&gt;'
</code></pre>

<p>It works.</p>

<p>What is the proper syntax for this kind of interpolation?</p>