JSFiddle - React, Tailwind, and code Playground

by Jigar Dafda

HTML

<div ng-app="myapp">
    <div ng-controller="MyCtrl1">
        <input type="radio" ng-model="value" value="evol1" ng-change="setSelectedEvol(value)" name="evol"/>
        <br/>
        <input type="radio" ng-model="value" value="evol2" ng-change="setSelectedEvol(value)" name="evol"/>
    </div>
    <div ng-controller="MyCtrl2">
        on change button radio evol = {{displayEvol}}
        <br/>
        {{balue}}
        <br/>
        {{$parent.balue}}
    </div>
 </div>

JavaScript

var myApp = angular.module('myapp',[]);

myApp
    .controller('MyCtrl1', function ($scope, $rootScope) {
        $scope.setSelectedEvol = function (value) {
        
            $scope.selectedEvol = value;
            
            switch ($scope.selectedEvol) {
                case 'evol1':
                    $scope.evol = 'Evol. VA';
                    break;
                case 'evol2':
                    $scope.evol = 'Evol. %';
                    break;          
            }
        
            $rootScope.$broadcast('ctr1Data', $scope.evol);
            
            $scope.$parent.balue = $scope.evol;
        };
    })
    .controller('MyCtrl2', function ($scope, $rootScope) {
        $scope.displayEvol = '';
        
        $scope.$on('ctr1Data', function (event, args) {
            $scope.displayEvol= args;
    
        });
         
    });