JSFiddle - React, Tailwind, and code Playground

by knalli

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>
<script type="text/ng-template" id="name.html">
    <input type="text" ng-model="member.name"/>
</script>

<div ng-controller="MemberCtrl">
    Member: <member model="member"></member>
    <ul>
        <li ng-repeat="child in member.children">
            Child {{$index}}: <member model="child"></member>   
        </li>
    </ul>

    <input type="button" ng-click="deleteChild()" value="Delete Child"/>
    <input type="button" ng-click="addChild()" value="Add Child"/>
	{{member.name}}
	{{member.children[1].name}}
</div>

JavaScript

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

app.controller('MemberCtrl', function($scope){
	$scope.member = {

		name: "Member1",
		children:[
		{
			name:"Child1"
		},
		{
			name:"Child2"
		}
		]
	};
	$scope.loadScope = function(obj){
		$.extend(this,obj);
	}
	$scope.deleteChild = function(obj){
		$scope.member.children.pop();
	}
	$scope.addChild = function(obj){
		$scope.member.children.push({name:"Child3"});
	}
});

app.directive('member', function(){
    return {
        templateUrl : 'name.html',
        replace : true,
        restrict: 'E',
        scope : {
            'member' : '=model'
        },
        link: function(scope, element, attr) {}
    };
});