AngularJS 1.2.x

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});


app.directive('creategroup', function() {
  return {
    restrict: 'E',
    
    templateUrl: 'creategroup.html',
    link: function (scope, el)
    {
      scope.groups = [];
      
      scope.createGroup = function() {
        scope.groups.push({id: scope.groups.length});
      }
    }
  }
});


app.directive('group', function () {
    return {
        restrict: 'E',
        scope: true,
        templateUrl: 'group.html',
        link: function (scope, el) {
            scope.rules = [];
            
            scope.addRule = function () {
                scope.rules.push({id: scope.rules.length});
            }
        }
    }
});

app.directive('rule', function () {
  return {
    restrict: 'E',
    scope: true, 
    templateUrl: 'rule.html', 
    link: function (scope, el) {
      scope.tags = [];
      scope.addTag = function () {
        scope.tags.push({id: scope.tags.length})
      }
    }
  }
});


app.directive('tag', function () {
  return {
    restrict: 'E',
    scope: true, 
    templateUrl: 'tag.html', 
    }
});

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
    <script src="app.js"></script>
  </head>
  
  
  <body ng-controller="MainCtrl">
    <creategroup></creategroup>
  
  
    <div class="group">
        <group ng-repeat="group in groups"></group>
    </div>
    
  </body>

</html>

/* Put your css in here */

<div style="border: 1px solid #000; padding: 2px; margin:5px;">
Group #{{group.id}}
    <input type="button" value="add a rule" ng-click="addRule()" />
    <div>
        <rule ng-repeat="rule in rules"></rule>
    </div>
</div>

<div style="border: 1px solid #000; margin: 5px; padding: 2px">
Rule #{{rule.id}}

<div>
    <input type="button" value="add a tag" ng-click="addTag()" />
    <div>
        <tag ng-repeat="tag in tags"></tag>
    </div>
</div>
</div>

<div>
Tag #{{tag.id}}
<div><input type="button" value="add a tag" ng-click="addTag()" /></div>
</div>

<input type="button" value="Create a Group" ng-click="createGroup()" />