<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.5.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    
    <script>
      var myapp = angular.module("myapp", []);
      myapp.controller('myController', ['$scope', function($s){
        $s.name='asdfasdf';
        $s.num = 1;
        $s.complex = {name: 'complex', subitem: { name:'nested', value:12 } };
        $s.tree = {name:'parent', num:2, children: [
          { name:'p c1', num:2, children: [{name: 'son1', num: 12 }, {name: 'son2', num: 12 }] },
          {name:'p c2', num:2, children: [{name: 'pc2s', num: 12 }] },
          ] };
      }]);
      
      myapp.directive('myDirective', function() {
        return {
          restrict: 'E',
          scope: false,
          template: '<input type="text" ng-model="name"></input><another-directive data="complex.subitem.name"/>'
        };
      });
      
      myapp.directive('anotherDirective', function() {
        return {
          restrict: 'E',
          scope: {data:'='},
          template: '<h1>data: {{data}}</h1><input style="background-color:green" type="text" ng-model="data"></input>'
        }
      });
      
      myapp.directive('recursiveDirective', function() {
        return {
          restrict: 'E',
          scope: {data:'='},
          template: '<h3>{{data.name}}</h3>'
          + '<div ng-repeat="item1 in data.children">'
          + '   <ul>'
          + '       <recursive-directive ng-if="data.children!=null" data="item1"/>'
          + '   </ul>'
          + '</div>'
        };
      });
      
    </script>
  </head>


  <body>
    <h1>Hello Plunker!</h1>
    
    <div ng-app='myapp' ng-controller='myController'>
      {{complex.subitem.name}}
      
      <recursive-directive data='tree'/>
    </div>
    
    
    
  </body>

</html>
// Code goes here

/* Styles go here */