title: AngularJS Variable Reference not Getting Populated on ng-click
body: <p>I have the following HTML which should generate a radio button with accompanying text for each element in <code>regionList</code>:</p>
  <pre><code>&lt;div ng-repeat=&quot;region in regionList&quot;&gt;
      &lt;input type=&quot;radio&quot; name=&quot;syncType&quot; ng-model=&quot;model.syncType&quot; value=&quot;REGION_{{region.id}}&quot; /&gt;
      &lt;span class=&quot;radio-text&quot; ng-click=&quot;setSyncType('REGION_{{region.id}}');&quot;&gt;Specified Region: {{region.region}} - {{region.projectCount}} Projects&lt;/span&gt;
      &lt;br /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The <code>{{region.id}}</code> references <em>appear</em> to be correctly populated when I inspect within Chrome:</p>
  <pre><code>&lt;div ng-repeat=&quot;region in regionList&quot; class=&quot;ng-scope&quot;&gt;
      &lt;input type=&quot;radio&quot; name=&quot;syncType&quot; ng-model=&quot;model.syncType&quot; value=&quot;REGION_f29a6d22-3bf5-4aa5-a564-b19451548288&quot; class=&quot;ng-pristine ng-untouched ng-valid&quot;&gt;
      &lt;span class=&quot;radio-text ng-binding&quot; ng-click=&quot;setSyncType('REGION_f29a6d22-3bf5-4aa5-a564-b19451548288');&quot;&gt;Specified Region: Utah - 12 Projects&lt;/span&gt;
      &lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And when I click the radio button, it works fine. When I click the accompanying text, <code>setSyncType()</code> receives the literal string <code>&quot;REGION_{{region.id}}&quot;</code>. What am I doing wrong? Or possibly, what should I look for?</p>
  <p>Worth mentioning: the <code>regionList</code> is populated asynchronously/as part of a Promise, and I still haven't completely wrapped my head around javascript promises. There are other buttons in the radio group that are not part of this regionList, and they display. Then the list refreshes including the regionList radio buttons.</p>