title: Call function on directive parent scope with directive scope argument
body: <p>I am developing a directive which shows and hides it's contents based on a click event (ng-click) defined in it's template. On some views where the directive is used I'd like to be able to know if the directive is currently showing or hiding it's contents so I can respond to the DOM changes. The directive has isolated scope and I am trying to notify the parent scope when the directive has been "toggled". I'm attempting to accomplish this by passing a callback function to the directive where it is used that can be called when the directive's state changes i.e hides or shows</p>
  
  <p>I'm not sure how to correctly implement this being that the state of the directive (hidden or shown) is stored in the directive's isolated scope and is determined after the ng-click. Therefore I need to call the parent scope's function from within the directive and not from withing the view. </p>
  
  <p>This will make WAAY more sense with an example. Here is a plunked demonstrating what I'd like to do:</p>
  
  <p><a href="http://plnkr.co/edit/hHwwxjssOKiphTSO1VIS?p=info" rel="noreferrer">http://plnkr.co/edit/hHwwxjssOKiphTSO1VIS?p=info</a> </p>
  
  <pre><code>var app = angular.module('main-module',[])
  
  app.controller('MainController', function($scope){
    $scope.myValue = 'test value';
    $scope.parentToggle = function(value){
      $scope.myValue = value;
    };
  });
  
  app.directive('toggle', function(){
      return {
              restrict: 'A',
              template: '&lt;a ng-click="toggle();"&gt;Click Me&lt;/a&gt;',
              replace: true,
              scope: {
                  OnToggle: '&amp;'
              },
              link: function($scope, elem, attrs, controller) {
                  $scope.toggleValue = false;
                  $scope.toggle = function () {
                      $scope.toggleValue = !$scope.toggleValue;
                      $scope.OnToggle($scope.toggleValue)
                  };
              }
          };
  });
  </code></pre>
  
  <p>I'm relatively new to Angular. Is this a bad idea to begin with? Should I be using a service or something rather than passing around function refs?</p>
  
  <p>Thanks! </p>