<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="TreeCtrl">
   <h3>A tree</h3>
   
    <input type="search" placeholder = "Search Node" ng-model="searchElement"/>
    <input type="button" value = "CollapseAll" ng-click="Collapse()" ng-model = "collapsedcanClick" ng-init="collapsedcanClick=false" ng-disabled = "!collapsedcanClick">{{collapsedcanClick}}{{active}}
    <!-- <input type="button" value = "ExpandAll" ng-click="expand = !expand">{{expand}} -->
   {{collapsedClicked}}
    <script type="text/ng-template" id="node.html" ng-model="active">

         <ul>
            <li ng-repeat="node in tree | filter:searchElement" ng-click="node.active = !node.active;NodeClick()" >
            
            <!--TODO at the root node collapse all button should be false<span ng-if = "!node.active" > {{$scope.collapsedcanClick = false}} </span> -->
                
                {{node.name}}
                
              <div ng-include="'node.html'" onload="tree = node.children | filter:searchElement" ng-click="node.active = !node.active" ng-show="node.active" ></div>
            </li>
        </ul>
    </script>
    <div ng-include="'node.html'"></div>
    <!-- {{ tree | json }} -->
   
  </body>
</html>
// Code goes here
(function() {
    var app = angular.module("myApp", []);

    var TreeCtrl = function($scope) {
        $scope.tree = [
            { "name": "USD", "selected": false, "children": [
                { "name": "TRAD1", "selected": false, "children": [
                    { "name": "FRA", "selected": false, "children": [] },
                    { "name": "FX", "selected": false, "children": [] },
                    { "name": "DL", "selected": false, "children": [] },
                    { "name": "DL", "selected": false, "children": [] }
                ] }
            ] },
            { "name": "GBP", "selected": false, "children": [
                { "name": "TRAD2", "selected": false, "children": [
                    { "name": "FRA", "selected": false, "children": [] }
                ] },
                { "name": "TRAD1", "selected": false, "children": [
                    { "name": "FRA", "selected": false, "children": [] }
                ] }
            ] }
        ];
        
        $scope.Collapse = function(){
          $scope.node.active=false;
        };
        
        $scope.NodeClick = function(){
         
          // $scope.node.active = !$scope.node.active;
          $scope.collapsedcanClick = true;
          console.log($scope.node);
          console.log($scope.active);
        };
  };
  app.controller("TreeCtrl",["$scope",TreeCtrl]);
  // app.controller("EventController",["$scope",EventController]);
}());
/**
 * Created by dhakande on 8/27/2014.
 */