JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<div ng-app='app'>
  <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>
  <hr/>
  <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('items', []);
var text = angular.module('text', []);
var app = angular.module('app', ['items', 'text']);


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
  }];
});