title: Can't call function inside custom directive. Scope is not what I want to use
body: <p>I used to have this inside my html 'calculations-td-plan.html'</p>
  
  <pre><code>&lt;tr ng-repeat="foodCalculation in selectedMealCalc.calculated_foods"&gt;
            &lt;td&gt;{{foodCalculation.food.name}}&lt;/td&gt;
            &lt;td&gt;{{foodCalculation.gram_amount}} g&lt;/td&gt;
            &lt;td&gt;{{foodCalculation.kcal}} kcal&lt;/td&gt;
            &lt;td&gt;{{foodCalculation.proteina}} g&lt;/td&gt;
            &lt;td&gt;{{foodCalculation.cho}} g&lt;/td&gt;
            &lt;td&gt;{{foodCalculation.lipideos}} g&lt;/td&gt;
            &lt;td class="text-center"&gt;
              &lt;button class="btn btn--principal btn--xs" ng-click="edtiFoodCalc(selectedmealcalc, foodCalculation, $index)"&gt;Editar&lt;/button&gt;
              &lt;button class="btn btn--principal btn--xs" ng-click="removeFoodCalc(selectedmealcalc, foodCalculation)"&gt;Remover&lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
  </code></pre>
  
  <p>Then I create a directive like above.</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-12" ng-show="( items | filter: { food_option: option } ).length &gt; 0"&gt;
      Opção {{ option }}
      &lt;table class="table table-calculo table-striped"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Alimento&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr ng-repeat="foodCalculation in ( items | filter: { food_option: option } ) track by $index"&gt;
            &lt;td&gt;{{foodCalculation.food.name}}&lt;/td&gt;
            &lt;td class="text-center"&gt;
              &lt;button class="btn btn--principal btn--xs" ng-click="edtiFoodCalc(selectedmealcalc, foodCalculation, $index)"&gt;Editar&lt;/button&gt;
              &lt;button class="btn btn--principal btn--xs" ng-click="removeFoodCalc(selectedmealcalc, foodCalculation)"&gt;Remover&lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I call this diretive inside 'calculations-td-plan.html' as</p>
  
  <pre><code>&lt;div ng-repeat="option in [0,1,2,3,4]"&gt;
      &lt;meal-option option="{{option}}"
                   items="selectedMealCalc.calculated_foods"
                   selectedmealcalc="selectedMealCalc"&gt;&lt;/meal-option&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is my directive JS.</p>
  
  <pre><code>'use strict';
  
  angular.module('nutriApp').directive('mealOption', ['$compile', function($compile) {
    var mealOption = {
      restrict: 'E',
      templateUrl: 'views/checkins/meal-options.html',
      require: 'foodSelector',
      scope: {
        option: "@",
        items: "=",
        selectedmealcalc: "="
      }
    };
  
    mealOption.controller = ['$scope', 'Food', function($scope, Food) {
      $scope.sumFood = {};
      $scope.summerizeOption = function(foods) {
        if(foods.length &gt; 0){
            $scope.sumFood = Food.summerize(foods);
        }
      };
    }];
  
    return mealOption;
  
  }]);
  </code></pre>
  
  <p>But now the funcions that I am calling <code>edtiFoodCalc</code> and <code>removeFoodCalc</code> are not working.</p>
  
  <p>When I put <code>ng-controller</code> in my directive it works, (Only call the method) but I can't get the same scope. </p>
  
  <pre><code>&lt;div class="row" ng-controller="CheckinsPlansCtrl"&gt;
  </code></pre>
  
  <p>I am trying to edit with <code>edtiFoodCalc</code> and I am not getting the result that I want. I think <code>ng-controller</code> creates new scopes when I do <code>ng-repeat</code>, and when I did not have a directive the code worked.</p>
  
  <pre><code>&lt;div ng-repeat="option in [0,1,2,3,4]"&gt;
          &lt;meal-option option="{{option}}"
                       items="selectedMealCalc.calculated_foods"
                       selectedmealcalc="selectedMealCalc"&gt;&lt;/meal-option&gt;
      &lt;/div&gt;
  </code></pre>