title: Passing data from ng-click within directive into a function in the controller
body: <p>I found this question which gets me almost to where I need to be.
  <a href="https://stackoverflow.com/questions/17567383/why-doesnt-ng-click-work-in-my-directive-and-how-do-i-add-a-toggle-class">Why doesn&#39;t ng-click work in my directive and how do I add a toggle class?</a></p>
  
  <p>Which makes it so my ng-click within my directive template triggers a function in my controller.
  <a href="http://plnkr.co/edit/GorcZZppa8qcIKbQAg2v?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/GorcZZppa8qcIKbQAg2v?p=preview</a></p>
  
  <p>The issue is that <strong>the parameter returned to my controller (item) is undefined</strong>. I need this to actually pass data from a variable within my directive to be used in the function that I will run in the controller.</p>
  
  <p><strong>Directive template file</strong></p>
  
  <pre><code>&lt;div class="tsProductAttribute" 
          ng-class="{'tsProductAttribute--selected': selected}" 
          ng-click="toggleState(item)"&gt;
  
      &lt;span class="tsProductAttribute-image"&gt;
          &lt;img ng-src="{{variantImage}}"&gt;
      &lt;/span&gt;
      &lt;span class="tsProductAttribute-desc"&gt;{{item.productName}}&lt;/span&gt;
      &lt;select ng-model="variantImage"&gt;
          &lt;option  ng-repeat="variant in item.variants" value="{{variant.image}}"&gt;{{variant.name}} - {{variant.listprice.amount}}&lt;/option&gt;
      &lt;/select&gt;
      &lt;span class="tsProductAttribute-price"&gt;{{item.variants[0].listprice.amount}} {{item.variants[0].listprice.entity}}&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Directive</strong></p>
  
  <pre><code>angular.module('msfApp')
  .directive('listitem', function () {
      return {
          templateUrl: 'assets/templates/directives/listitem.html',
          restrict: 'E',
          scope: {
              'item': '=',
              'itemClick': '&amp;'
          },
          link: function(scope, iElement, iAttrs) {
            scope.selected = false;
            scope.toggleState = function(item) {
              scope.selected = !scope.selected;
              scope.itemClick(item);
            }
          }
      }
  });
  </code></pre>
  
  <p><strong>Directive implementation</strong></p>
  
  <pre><code>&lt;listitem item="item" item-click="toggleInBasket(item)"&gt;&lt;/listitem&gt;
  </code></pre>
  
  <p><strong>Function in controller</strong></p>
  
  <pre><code>$scope.toggleInBasket = function(item) {
          $scope.basket.toggle(item);
  
          console.log(basket.get());
  
      }
  </code></pre>
  
  <p><em>(item) is undefined</em></p>