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

i have 2 controllers , controller filter , display controller results in first have group of radio button , when change radio button , sending event change value displayed in second controller , code follows : know not coment changed in second controller

html :

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

angular:

var myapp = angular.module('myapp',[]);      function myctrl1 ($scope) {       $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);      }      function myctrl2 ($scope) {       $scope.$on('ctr1data', function (event, args) {         $scope.displayevol= args;      });       } 

see 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 work if both controllers side 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;          });      });