JSFiddle - React, Tailwind, and code Playground

by Bharat Sewani

HTML

<div ng-app="myApp">

		<div ng-controller="FirstCtrl">
			<input type="text" ng-model="Data.FirstName"><!-- Input entered here -->
			<br>Input is : <strong>{{Data.FirstName}}</strong><!-- Successfully updates here -->
		</div>
		<hr>
		<div ng-controller="SecondCtrl">
			Input should also be here: {{Data.FirstName}}<!-- How do I automatically updated it here? -->
		</div>

	</div>

JavaScript

// declare the app with no dependencies
var myApp = angular.module('myApp', []);


myApp.factory('Data', function(){
    return { FirstName: '' };
});

myApp.controller('FirstCtrl', function( $scope, Data ){
	$scope.Data = Data;
});

myApp.controller('SecondCtrl', function( $scope, Data ){
	$scope.Data = Data;
});