Passing a function as parameter in an Angular Directive doesn't work
<p>I'm new in angular and I'm trying to connect two isolated directives under the same controller. My project is about a product store; the first directive shows all available products in a list with a button, the second shows the information with details. Workflow should be this: when I click on the button of a product the detail information should be reloaded with the content of the choosen product.</p>

<p>I think I've done all the conections needed, but it still doesn't work, when I click the button nothing happens... Here are my declarations:</p>

<ul>
<li><p>Main.html</p>

<pre><code>&lt;div ng-controller="ProductController as productCtrl"&gt;
&lt;product-list data=productCtrl.productList&gt;&lt;/product-list&gt;
&lt;product-details title={{productCtrl.activeProduct.title}} img={{productCtrl.activeProduct.imgSrc}} activator="productCtrl.setActiveProduct(p)"&gt;&lt;/product-details&gt;
&lt;div&gt;
</code></pre></li>
<li><p>ProductList.js</p>

<pre><code>'use strict'

angular.module('angularTestAppApp')
  .directive("productList", function(){
    return {
      restrict: 'E',
      scope:{
        data: "=",
        function: "&amp;activator"
      },
      templateUrl: 'views/ProductList.html'
    }
  });
</code></pre></li>
<li><p>ProductList.html</p>

<pre><code>&lt;table class="table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Price&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr ng-repeat="product in data"&gt;
        &lt;th scope="row"&gt;
          &lt;button class="btn btn-info glyphicon glyphicon-play" ng-click='function(product)'&gt;&lt;/button&gt;
        &lt;/th&gt;
        &lt;td&gt;{{product.title}}&lt;/td&gt;
        &lt;td&gt;{{product.price | currency}}&lt;/td&gt;
        &lt;td&gt;
          &lt;img ng-src={{product.imgSrc}} width=15%&gt;&lt;/img&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
</code></pre></li>
<li><p>ProductController.js</p>

<pre><code>'use stricts'

angular.module('angularTestAppApp')
  .controller('ProductController', function(productListService) {

    ...

    this.activeProduct = {
      "title": "Hymn for the Weekend",
      "imgSrc": "images/hymn.jpg",
      "price": "2"
    };

    this.setActiveProduct = function(p) {
      this.activeProduct = p;
      console.log('Active product ' + this.activeProduct);
    }

  });
</code></pre></li>
</ul>

<p>Any idea?</p>

<p>Thanks for all :)!</p>

<p>EDIT: The problems were:
 - 1: The argument was in the wrong directive.
 - 2: I was writing bad the function, to set parameters you need to bind the data by this way:</p>

<pre><code>    ng-click='function({product:product})'

Instead of 

    ng-click='function(product)'

Calling in the HTML directive by this way:

    &lt;product-list data=productCtrl.productList activator="productCtrl.setActiveProduct(product)"&gt;&lt;/product-list&gt;
</code></pre>

<p>Thanks for your help :).</p>