title: Why doesn't ng-click work in my directive and how do I add a toggle class?
body: <p>I've created a directive in Angular that looks like this:</p>
  
  <pre><code>angular.module('msfApp')
      .directive('listitem', function () {
          return {
              templateUrl: 'assets/templates/directives/listitem.html',
              restrict: 'E',
              scope: {
                  'item': '='
              }
          }
      });
  </code></pre>
  
  <p>And the template looks like so:</p>
  
  <pre><code>&lt;div class="tsProductAttribute" ng-click="toggleInBasket(item)"&gt;
      &lt;span class="tsProductAttribute-image"&gt;
          &lt;img ng-src="{{item.variants[0].image}}"&gt;
      &lt;/span&gt;
      &lt;span class="tsProductAttribute-desc"&gt;{{item.productName}}&lt;/span&gt;
      &lt;span class="tsProductAttribute-price"&gt;{{item.variants[0].price[0].amount}} {{item.variants[0].price[0].entity}}&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>But now I have two questions:</strong></p>
  
  <ol>
  <li>The ng-click function doesn't fire in my controller, <code>toggleInBasket(item)</code>, why is that?</li>
  <li>And secondly, how do I add a toggle behaviour to the list item so that it toggles a class called "tsProductAttribute--selected"</li>
  </ol>
  
  <p>Thanks in advance guys!</p>