title: Broadcast from directive to controller
body: <p>I am trying to modify a form in a view by means of a button in my directive's template (template is in another file), this is for a basic CRUD where each item has a delete/edit button.</p>
  
  <p>In order to avoid replicating the form I decided to that on edit's click a function would send the item to the controller in questions in order to be updated with the new information.</p>
  
  <p>But I've been having troubles making the connection, so far I tried changing <code>$root</code>, to <code>$rootScope</code> back and forth and using , <code>$broadcast</code> or <code>$emit</code>.</p>
  
  <p>So how can I send the function onChange my item's information based on the template's button click?</p>
  
  <p><strong>Template:</strong></p>
  
  <pre><code>&lt;strong&gt;{{item.type}}&lt;/strong&gt; {{item.description}}
  
  &lt;div class="material-switch pull-right"&gt;
  
  
      &lt;button type="button" class="btn btn-warning btn-circle"  ng-show="item.editable" ng-click="onChange()"&gt;
          &lt;span class="glyphicon glyphicon-edit" &gt;&lt;/span&gt;
      &lt;/button&gt;
  
      &lt;button type="button" class="btn btn-danger btn-circle" ng-controller="View1Ctrl" ng-show="item.editable" ng-click="EliminarItem(item)"&gt;
          &lt;span class="glyphicon glyphicon-minus" &gt;&lt;/span&gt;
      &lt;/button&gt;
  
  
      &lt;input ng-model="item.isDone" 
          id="someSwitchOptionDefault{{itemIndex}}" 
          name="someSwitchOption001{{itemIndex}}" 
          type="checkbox" /&gt; 
          &lt;label for="someSwitchOptionDefault{{itemIndex}}" class="label-info"&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Directive</strong>:</p>
  
  <pre><code>'use strict';
  
  angular.module('myApp.items.directive', [])
  
  .directive('itemSwitch', [ function() {
      return {
          restrict: 'A',
          scope: {
              item: '=',
              itemIndex: "="
          },
          templateUrl: 'templates/itemSwitchTemplate.html',
          link : function($scope){
              $scope.$broadcast('onChange', item);
          }
      }
  }]);
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>.controller('View1Ctrl', ['$scope','itemsService',function($scope,itemsService) {
      $scope.items = itemsService.getItems();
      $scope.classMap = {GROCERIES:"success",CAR:"danger",UNIVERSITY:"warning",PAYMENTS:"info"};
      $scope.newItem = {};
  
  
      $scope.$on('onChange', function(event, args) {
  
          if ($scope.btnEdit) {
  
               $scope.newItem = args;
          } else {
               $scope.newItem = {};
          } 
  
      });
  
  
      $scope.enableEdit = function (item) {
  
                  item.editable = true;
              };
  
      $scope.disableEdit = function (item) {
  
                  item.editable = false;
  
              };
  
  }]);
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <pre><code>        &lt;div class="col-xs-12"&gt;
              &lt;div ng-model="currentItem" ng-repeat="item in items" item-switch item="item" item-index="$index" class="notice notice-{{classMap[item.type]}}" ng-mouseover="enableEdit(item)" ng-mouseleave="disableEdit(item)"&gt;
              &lt;/div&gt;
  
  
  &lt;!-- FORMULARIO --&gt;
  
      &lt;form name = "myForm" class="form-horizontal"&gt;
        &lt;fieldset&gt;
          &lt;div id="legend"&gt;
            &lt;legend class=""&gt;Task&lt;/legend&gt;
          &lt;/div&gt;
  
          &lt;div class="control-group"&gt;
            &lt;!-- Name--&gt;
            &lt;label class="control-label"&gt;Name&lt;/label&gt;
            &lt;div class="controls"&gt;
              &lt;input type="text" name="itemName" ng-model="newItem.name" placeholder="Task Name" class="input-xlarge"  ng-required="true" &gt;
              &lt;p class="help-block"&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="control-group"&gt;
            &lt;!-- Description --&gt;
            &lt;label class="control-label"&gt;Description&lt;/label&gt;
            &lt;div class="controls" &gt;
              &lt;input type="text" ng-model="newItem.description" placeholder="Task Description" class="input-xlarge"&gt;
              &lt;p class="help-block"&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="control-group"&gt;
            &lt;!-- Button --&gt;
            &lt;div class="controls"&gt;
              &lt;a class="btn icon-btn btn-success" ng-disabled="myForm.$invalid" ng-click="addOrSaveItem()"&gt;
              &lt;span class="glyphicon btn-glyphicon glyphicon-save img-circle text-success"&gt;&lt;/span&gt;Save&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/fieldset&gt;
      &lt;/form&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Kvt4s/74/" rel="nofollow noreferrer">FiddleJS</a></p>
  
  <p>Look nd Feel</p>
  
  <p><a href="https://i.stack.imgur.com/pN7LE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pN7LE.png" alt="enter image description here"></a></p>