title: What makes an Angular.JS directive require curly braces around it?
body: <p>I've been doing a codeschool tutorial on Angular.JS and one section in particular confused me.  Here's the code snippet I'm referring to:</p>
  
  <pre><code>&lt;section class="tab" ng-controller="TabController as tabs"&gt;
      &lt;ul class="nav nav-pills"&gt;
        &lt;li ng-class="{active:tabs.isSet(1)}"&gt;
          &lt;a href ng-click="tabs.setTab(1)"&gt;Description&lt;/a&gt;&lt;/li&gt;
        &lt;li ng-class="{active:tabs.isSet(2)}"&gt;
          &lt;a href ng-click="tabs.setTab(2)"&gt;Specs&lt;/a&gt;&lt;/li&gt;
        &lt;li ng-class="{active:tabs.isSet(3)}"&gt;
          &lt;a href ng-click="tabs.setTab(3)"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>This line in particular needs curly braces in the directive to be correct by CodeSchool standards:</p>
  
  <pre><code>&lt;li ng-class="{active:tabs.isSet(1)}"&gt;
  </code></pre>
  
  <p>My question is, how come this other line's directive comes through correctly without the need of curly braces:</p>
  
  <pre><code>&lt;a href ng-click="tabs.setTab(1)"&gt;Description&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>To me, it would seem that since I'm accessing the function <code>tabs.setTab()</code> I would need to wrap it in the same way as before.  Can anyone explain why this is the case?</p>
  
  <p>Here's the TabController JS code by the way for reference:</p>
  
  <pre><code>app.controller('TabController', function(){
      this.tab = 1;
  
      this.setTab = function(newValue){
        this.tab = newValue;
      };
  
      this.isSet = function(tabName){
        return this.tab === tabName;
      };
  });
  </code></pre>