JSFiddle - React, Tailwind, and code Playground

by floor_

HTML

<div ng-app="testApp">
    <div ng-controller="testCtrl as ctl">
      {{ctl.testing}}
      <p>
      {{ctl.rootScopeTest}}
      </p>
    </div>
    
    <div ng-controller="testCtrl2 as ctl">
      <button ng-click="ctl.changeRootScope();">
      test
      </button>
    </div>
 </div>

JavaScript

angular.module('testApp', []);


angular.module("testApp").controller("testCtrl",
	["$scope", '$rootScope',
  	function($scope, $rootScope) {
    	console.log('loaded');
  		var self = this;
      
      self.rootScopeTest = $rootScope.test ? $rootScope.test : 0;
      
      angular.extend(self, {
      	testing: 'Test is working'
      });
    }
 	]
);

angular.module("testApp").controller("testCtrl2",
	["$scope", '$rootScope',
  	function($scope, $rootScope) {
  		var self = this;
      console.log('loaded2')
      
      function changeRootScope() {
      	console.log('rootey', $rootScope.test);
        $rootScope.test = 'undefined' ? 0 : $rootScope.test;
      	$rootScope.test = $rootScope.test + 1;
      }
       
      angular.extend(self, {
        changeRootScope: changeRootScope
      });
    }
 	]
);