JSFiddle - React, Tailwind, and code Playground

by vaibhavgupta007

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<div ng-controller="MemberCtrl">
<div ng-include="'name.html'"></div>
<div ng-include="'name.html'" ng-controller="ScopeController" onload="loadScope({member: member.children[1]})"></div>
    <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>
	<script type="text/ng-template" id="name.html">
		<input type="text" ng-model="member.name"/>
	</script>

JavaScript

function MemberCtrl($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"});
	}
}

function ScopeController($scope){

}