title: How to properly bind scope between directive and controller with angularJS
body: <p>I'm trying to generate an n-level hierarchical unordered list with anugularJS, and have been able to successfully do so.  But now, I'm having scope issues between the directive and controller.  I need to change a scope property of the parent from within a function called via ng-click in the directive template.</p>
  
  <p>See <a href="http://jsfiddle.net/ahonaker/ADukg/2046/">http://jsfiddle.net/ahonaker/ADukg/2046/</a> - here's the JS</p>
  
  <pre><code>var app = angular.module('myApp', []);
  
  //myApp.directive('myDirective', function() {});
  //myApp.factory('myService', function() {});
  
  function MyCtrl($scope) {
      $scope.itemselected = "None";
      $scope.organizations = {
          "_id": "SEC Power Generation",
          "Entity": "OPUNITS",
          "EntityIDAttribute": "OPUNIT_SEQ_ID",
          "EntityID": 2,
          "descendants": ["Eastern Conf Business Unit", "Western Conf Business Unit", "Atlanta", "Sewanee"],
          children: [{
              "_id": "Eastern Conf Business Unit",
              "Entity": "",
              "EntityIDAttribute": "",
              "EntityID": null,
              "parent": "SEC Power Generation",
              "descendants": ["Lexington", "Columbia", "Knoxville", "Nashville"],
              children: [{
                  "_id": "Lexington",
                  "Entity": "OPUNITS",
                  "EntityIDAttribute": "OPUNIT_SEQ_ID",
                  "EntityID": 10,
                  "parent": "Eastern Conf Business Unit"
              }, {
                  "_id": "Columbia",
                  "Entity": "OPUNITS",
                  "EntityIDAttribute": "OPUNIT_SEQ_ID",
                  "EntityID": 12,
                  "parent": "Eastern Conf Business Unit"
              }, {
                  "_id": "Knoxville",
                  "Entity": "OPUNITS",
                  "EntityIDAttribute": "OPUNIT_SEQ_ID",
                  "EntityID": 14,
                  "parent": "Eastern Conf Business Unit"
              }, {
                  "_id": "Nashville",
                  "Entity": "OPUNITS",
                  "EntityIDAttribute": "OPUNIT_SEQ_ID",
                  "EntityID": 4,
                  "parent": "Eastern Conf Business Unit"
              }]
          }]
      };
  
      $scope.itemSelect = function (ID) {
          $scope.itemselected = ID;
      }
  }
  
  app.directive('navtree', function () {
      return {
          template: '&lt;ul&gt;&lt;navtree-node ng-repeat="item in items" item="item" itemselected="itemselected"&gt;&lt;/navtree-node&gt;&lt;/ul&gt;',
          restrict: 'E',
          replace: true,
          scope: {
              items: '='
          }
      };
  });
  
  app.directive('navtreeNode', function ($compile) {
      return {
          restrict: 'E',
          template: '&lt;li&gt;&lt;a ng-click="itemSelect(item._id)"&gt;{{item._id}} - {{itemselected}}&lt;/a&gt;&lt;/li&gt;',
          scope: {
              item: "=",
              itemselected: '='
          },
          controller: 'MyCtrl',
          link: function (scope, elm, attrs) {
              if ((angular.isDefined(scope.item.children)) &amp;&amp; (scope.item.children.length &gt; 0)) {
                  var children = $compile('&lt;navtree items="item.children"&gt;&lt;/navtree&gt;')(scope);
                  elm.append(children);
              }
          }
      };
  });
  </code></pre>
  
  <p>and here's the HTML</p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
      Selected: {{itemselected}}
  
      &lt;navtree items="organizations.children"&gt;&lt;/navtree&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Note the list is generated from the model.  And ng-click calls the function to set the parent scope property (itemselected), but the change only occurs locally.   Expected behavior, when I click on an item, is that "Selected: None" should change to "Selected: xxx" where xxx is the item that was clicked.  </p>
  
  <p>Am I not binding the property between the parent scope and the directive appropriately?  How do I pass the property change to the parent scope?</p>
  
  <p>Hope this is clear.</p>
  
  <p>Thanks in advance for any help.</p>