JSFiddle - React, Tailwind, and code Playground

by Vikeh Kumar

HTML

<div ng-app='app1'>
    <div ng-controller='ItemController'>
		<h1>Your Orders</h1>
		<div ng-repeat='item in items'>
			<span>{{item.title}}</span><input type="text"
				ng-model="item.quantity"><span>{{item.price |
				currency}}</span>&nbsp;|&nbsp;<span>{{item.price *
				item.quantity | currency}}</span>
		</div>
	</div>
</div>
<hr/>
<div ng-app='app2'>
    <div ng-controller='TextController'>
    Enter a text:: <input ng-model='text.message'>
    <h2>{{text.message}}, Journey just started!</h2>
    </div>
</div>

JavaScript

var items = angular.module('app1', []);
var text = angular.module('app2', []);
var obj = {};
text.controller('TextController', function($scope) {
	$scope.text = {
		message : 'Welcome!!'
	};
});

items.controller('ItemController', function($scope) {
	$scope.items = [ {
		title : 'Pencil',
		quantity : 8,
		price : 4.2
	}, {
		title : 'Pen',
		quantity : 2,
		price : 5.2
	}, {
		title : 'Watch',
		quantity : 3,
		price : 10.2
	} ];
});