AngularJS Example:

by Stepan Kasyanenko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js"></script>
<div ng-app="app" ng-controller="mainCtrl">
    <customer-form ind="ind"></customer-form>
</div>

JavaScript

angular.module('app', [])
    
   .controller("mainCtrl", ['$scope', function($scope) {
		$scope.ind= 0;
	 }])
   
   .directive('newDirective', function ( $compile ){
		return {
			restrict: 'E',
      replace:true,
      scope:{},
			template: 
				'<ul>' +
					'<li>' +
						'<button ng-click="remove()">Remove {{ind}}</button>' +
					'</li>'+
				'</ul>',
			link: function (scope, element, attributes) {  
        scope.ind = Math.round(Math.random()*100);
				scope.remove = function () {
        console.log(scope.ind);
					element.remove();
				}
			}
		}
	})
    
	.directive('customerForm', function($compile) {

		return {

			scope: {ind:"="},

			restrict: 'E',

			transclude: true,

			template: '<div>'+
            '<input type="button" value="addd" name="AAA" ng-click="getData()">'+
        '</div>',

			controller: "mainCtrl",

			link: function(scope, element, attrs, mainCtrl) {
      
				scope.getData = function() {
					$newDirective = angular.element('<new-directive ind="ind">');
					element.append($newDirective);
					$compile( $newDirective )(scope);
				}

			}
 		};
	});