Broadcast from directive to controller
<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>