AngularJS Directive scope inheritance

I am trying to create a angular tree directive, here is the codes :

//** Tree constructor
var Tree = function() {
  return {
    restrict: 'EA',
    replace: true,
    template: "<ul>" +
                "<li ng-repeat=\"node in node.children\">" +
                "<a ng-click=\"selectNode(node)\" ng-class=\"{selected: isSelected(node)}\">" +
                  "{{node.name}}" +
                "</a>" +
                "<tree-children></tree-children>" +
                "</li>" +
              "</ul>",
    scope: {
      treeData: '='
    },
    controller: function($scope) {
        //** Selected Node
        $scope.selectedNode = null;

        //** Node on click
        $scope.selectNode = function(node) {
            if ($scope.selectedNode !== node) {
              $scope.selectedNode = node;
            } else {
              $scope.selectedNode = null;
            }
        };

        $scope.isSelected = function(node) {
            return (node === $scope.selectedNode);
        }

    },
    link: function(scope, elem, attrs) {

      //** Watch
      scope.$watch('treeData', function(data) {
        if (angular.isArray(data)) {
          scope.node = {};
          scope.node.children = data;
        } else {
          //***********
        }
      });
    }
  }
}

//** Tree children constructor
var TreeChildren = function($compile) {
  return {
    restrict: 'E',
    link: function(scope, elem, attrs) {

      var childScope = scope.$new(),
          template = '<tree tree-data="node.children"></tree>',
          content = $compile(template)(childScope);

      //** Append
      elem.append(content);
    }
  };
};

TreeChildren.$inject = ['$compile'];

//** Angular Module
angular
.module('app', [])
.directive('tree', Tree)
.directive('treeChildren', TreeChildren)
.controller('treeCtrl', ['$scope', function($scope) {
  $scope.treeData = [
        {
            name: 'Root',
            children: [
                {
                    name: 'Node-1',
                    children: [
                        { name: 'Node-1-1'},
                        { name: 'Node-1-2'},
                        { name: 'node-1-3'}
                    ]
                },
                {
                      name: 'Node-2',
                      children: [
                        { name: 'Node-2-1'}
                      ]
                }
            ]
        }
    ];
}]);

The Plunker link

I have got the problem to set up $scope.selectedNode to be a Global one, now if click on the tree node, the css style doesn't look right, as $scope.selectedNode only affect on it's own scope within the treeChildren directive.

How do I do the scope inheritance from the main directive scope? as I want every node click will access the Global $scope.selectedNode.

I have done some reading on Understanding Scopes but still confuse.

Hope I do explain clearly as my poor english