JSFiddle - React, Tailwind, and code Playground

by ndw5015

HTML

<div ng-app="myapp">
    <div ng-controller="Main">
        <h2 ng-bind="header"></h2>
        <p ng-bind="linkedData.mydata"></p>
        <p ng-bind="linkedData.mydata2"></p>
        <div ng-controller="Another">
            <input type="text" ng-model="linkedData.mydata" />
            <input type="text" ng-model="linkedData.mydata2" />
        </div>
    </div>
<div>

JavaScript

// main angular app
angular.module('myapp', []);

// create a main controller
angular.module('myapp')
	.controller('Main', ['$scope', 'LinkData', function($scope, LinkData){
    	$scope.header='Bind to service';
        $scope.linkedData = LinkData;
    }]);

// create a another controller
angular.module('myapp')
	.controller('Another', ['$scope', 'LinkData', function($scope, LinkData){
    	$scope.linkedData = LinkData;
    }]);

// create a link factory
angular.module('myapp')
	.factory('LinkData', [function(){
        var mydata = 'Initial value';
        var mydata2 = 'Initial value 2';
        
    	return {
        	mydata: mydata,
          mydata2: mydata2
        }
        console.log(mydata);
    }]);