button radio change value in another controller with ng-click in angular js

Question

I have two controllers , a controller filter and a display controller results in the first I have a group of radio button , when you change the radio button , sending an event t

Answer 1

see this fiddle

http://jsfiddle.net/jigardafda/skyk3erh/

Using events

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}} 
    </div>
 </div>

JS

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

        };
    })
    .controller('MyCtrl2', function ($scope, $rootScope) {
        $scope.displayEvol = '';

        $scope.$on('ctr1Data', function (event, args) {
            $scope.displayEvol= args;

        });

    });

Using $parent

this will work if both controllers are side by side.

http://jsfiddle.net/jigardafda/skyk3erh/2/

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>

JS

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;

        });

    });