title: Why can't I use interpolation with a directive?
body: <p>I have searched and found a few articles that address "How does one assign a scoped variable to the value of an html attribute tag". See:</p>
  
  <p><a href="https://docs.angularjs.org/guide/interpolation" rel="nofollow noreferrer">https://docs.angularjs.org/guide/interpolation</a> </p>
  
  <p><a href="https://stackoverflow.com/questions/25963591/how-to-assign-angularjs-variable-value-to-html-element-attribute-such-as-input">How to assign angularjs variable value to html element attribute, such as input elememnt&#39;s name attribute</a></p>
  
  <p>In my controller I have defined the following:</p>
  
  <pre><code>    $scope.reportFields = "{'summary.imageID':'Image ID' }";
  </code></pre>
  
  <p>in my html document I have defined the following:</p>
  
  <pre><code>    &lt;a href="{{reportFields}}"&gt;A TEST EXAMPLE&lt;/a&gt;
      &lt;button ng-json-eport-excel title="CSV" class="bt btn-md btn-success" separator="," data="mdcData" report-fields="{{reportFields}}" filename="'mySearch'"&gt;
  </code></pre>
  
  <p>when I bring the page into the browser I find that the page reports a parse syntax error on defining {{reportFields}} for my button element.</p>
  
  <pre><code>     Error: [$parse:syntax] Syntax error: Token '{' invlaid key at column 2 of the expression [{{reportFields}}] starting at [reportFields}}].
  </code></pre>
  
  <p>if I forgo using a variable and hardcode the value as in:</p>
  
  <pre><code>    &lt;button ng-json-eport-excel title="CSV" class="bt btn-md btn-success" separator="," data="mdcData" report-fields="{'summary.imageID':'Image ID' }" filename="'mySearch'"&gt;        
  </code></pre>
  
  <p>it compiles and works correctly. If I add the 'ng-if' it compiles correctly as seen below:</p>
  
  <pre><code>    &lt;button ng-json-eport-excel title="CSV" class="bt btn-md btn-success" separator="," data="mdcData" report-fields="{{reportFields}}" ng-if="reportFields.length &gt; 0" filename="'mySearch'"&gt;
  </code></pre>
  
  <p>Furthermore when I examine the generated HTML via the inspector I can see that for the 'ahref' tag that angularjs's interpolation has translated 'reportFields' to '"{'summary.imageID':'Image ID' }"' for the ahref tag but it hasn't translate the value for the report-fields tag specified on the button.  I have also tried:</p>
  
  <pre><code>    ng-if="1==1" filename="'mySearch'"&gt;
  </code></pre>
  
  <p>for my expression which should always evaluate to true. My questions (and I am new to angularjs and I need help understanding) are:</p>
  
  <ol>
  <li>Why do I get a syntax parse error for using the double curly angles with the second HTML element (button) but not the first (href)??</li>
  <li>Why does the parse error go away with the 'ng-if' statement</li>
  <li><p>Why doesn't the interpolation happen in the case for </p>
  
  <pre><code> report-fields="{{reportFields}}"
  </code></pre>
  
  <p>but occurs just fine for:</p>
  
  <pre><code> &lt;a href="{{reportFields}}"&gt;A TEST EXAMPLE&lt;/a&gt;
  </code></pre></li>
  </ol>
  
  <p>Thanks for your help in advance.</p>
  
  <p>Pete</p>