title: When to use double braces {{}} in angularJS
body: <p>Taken from the Angular documentation:</p>
  
  <blockquote>
    <p><a href="https://docs.angularjs.org/guide/expression" rel="noreferrer">Angular Expressions</a><br>
    Angular expressions are JavaScript-like code snippets that are mainly
    placed in interpolation bindings such as </p>
  </blockquote>
  
  <pre><code>&lt;span title="{{ attrBinding }}"&gt;{{ textBinding }}&lt;/span&gt;
  </code></pre>
  
  <blockquote>
    <p>but also used directly in directive
    attributes such as <code>ng-click="functionExpression()"</code>.</p>
    
    <p>For example, these are valid expressions in Angular:</p>
    
    <p>1+2 a+b user.name items[index]</p>
  </blockquote>
  
  <p>However I'm a little confused as to when to use the double braces syntax <code>{{}}</code> and when not to. The documentation seems to suggest that you don't need them when using expressions within the directive attributes (see the ng-click example above).</p>
  
  <p>Although the following code which works offers anecdotal evidence to the contrary:</p>
  
  <pre><code>&lt;ul id="Menu"&gt;
          &lt;li ng-repeat="appModule in applicationModules"
              id="{{appModule.Name}}"
              ng-class="{ 'selected' :  selectedAppModule == '{{appModule.Name}}' }" 
              ng-click="menuClicked(appModule.Name)"&gt;
              &lt;a href="#Content/{{appModule.Name}}"&gt;{{appModule.Display}}&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Note how in the ng-class directive the double braces are used and inside the ng-click directive they are not.</p>
  
  <p>How do you know when to use them and when not to?</p>