title: AngularJS Components binding function ( call function from another controller)
body: <p>I have problem with binding.
  Example: In one component view I have attribute 
   ng-click="$ctrl.onDelete"  in this controller I have binding option onDelete: '&amp;' , and in another controller view I have attribute 
  on-delete="$ctrl.deleteSomething()" 
  in this view controller I have function like: this.deleteSomething(). </p>
  
  <p>So why doesn't this stuff work. If I understand it right - 
  When I click on "ng-click" - I call function which doesn't exist in my controller but bound to some of attribute in my app. So my click find this attribute name and call in this attribute defined function from local controller?</p>
  
  <pre><code>     function CalendarSlotController($scope, $element){
  
  
           }
  
  
          mod.component('calendarSlot', {
          bindings: {
          onDelete: '&amp;'  },
          controller: CalendarSlotController
  
          });
  
  
  
  
  
         function CalendarSlotFormController($scope, $element){
  
         var ctrl = this;
  
         ctrl.deleteSomething = function(){
  
         alert(10);
  
         var test = 2-2;
         }
  
         }
  
  
        mod.component('calendarSlotForm', {
  
        controller: CalendarSlotFormController
  
        });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;calendar-slot day=weekDay.name slots=$ctrl.slots&gt;
    &lt;button ng-lick="$ctrl.onDelete"&gt;onDelete&lt;/button&gt;
    &lt;/calendar-slot&gt;
  
    &lt;calendar-slot-form on-delete="$ctrl.deleteSomething()"&gt;
    &lt;/calendar-slot-form&gt;
  </code></pre>
  
  <p>Link to code: <a href="http://plnkr.co/edit/KpEXtgtZqEySBReV5ecq" rel="nofollow">http://plnkr.co/edit/KpEXtgtZqEySBReV5ecq</a></p>