title: Access controller scope from directive of nested directive
body: <p>please see my <a href="http://jsfiddle.net/DavidSlavik/N7aKa/12/" rel="noreferrer">fiddle</a> and help me find a way to access function myAlert from nested directive "choice". A found some solutions where was shared some properties of scope like this: <a href="http://jsfiddle.net/zbD95/6/" rel="noreferrer">http://jsfiddle.net/zbD95/6/</a> but I need use functions and properties from scope together.</p>
  
  <p>Thanks!!!</p>
  
  <p>Here is duplicate of my fiddle:
  HTML part of fiddle:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="plunker" &gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;AngularJS Plunker&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body ng-controller="MainCtrl"&gt;
    &lt;choice-tree ng-model="myTree"&gt;&lt;/choice-tree&gt;  
    &lt;hr /&gt;
    &lt;!--$scope.myTree = {{myTree | json}}--&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS part of fiddle:</p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  function Choice(name, children) {
    this.name = name;
    this.checked = false;
    this.children = children || [];
  }
  
  var apparel = new Choice('Apparel', [
    new Choice('Mens Shirts', [
      new Choice('Mens Special Shirts'),
    ]),
    new Choice('Womens Shirts'),
    new Choice('Pants')
  ]);
  var boats = new Choice('Boats');
  
  app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
  
    $scope.myTree = [apparel, boats]; 
  
    $scope.myAlert = function(ev){
      alert('ad');
    };
  });
  
  app.directive('choiceTree', function() {
        return {
            template: '&lt;ul&gt;&lt;choice ng-repeat="choice in tree"&gt;&lt;/choice&gt;&lt;/ul&gt;',
          replace: true,
          transclude: true,
          restrict: 'E',
          scope: {
            tree: '=ngModel'
          }
        };
  });
  
  app.directive('choice', function($compile) {
    return { 
      restrict: 'E',
       transclude: true,
      //In the template, we do the thing with the span so you can click the 
      //text or the checkbox itself to toggle the check
      template: '&lt;li&gt;' +
        '&lt;span ng-click="myAlert(choice)"&gt;' +
        '&lt;input type="checkbox" ng-checked="choice.checked"&gt; {{choice.name}} - {{name}}' +
        '&lt;/span&gt;' +
      '&lt;/li&gt;',
        link: function (scope, elm, attrs) {
  
        //Add children by $compiling and doing a new choice directive
        if (scope.choice.children.length &gt; 0) {
          var childChoice = $compile('&lt;choice-tree ng-model="choice.children"&gt;&lt;/choice-tree&gt;')(scope)
          elm.append(childChoice);
        }
      }
    };
  });
  </code></pre>