Do something on radio button selection change AngularJS

Question

I need to refresh some data depending on selection of a particular radio button group.

working plunker http://plnkr.co/edit/kZhsiU4pVpHhoscVkvMQ?p=preview

But I can get neither the ng-change nor the ng-click to execute my method which updates name and makes Hello World to show Hello 'selection'.

$scope.updateValue = function(){
    $scope.name = $scope.data.myNumber;
  };

But I can see that the two way data binding works - so the model is getting updated.

<span>You selected {{ data.myNumber }}</span>

On a side note: another thing I tried is to watch the model value and execute what I want to do, but that does not work either - the watchcollection is not triggered ever again other than at page load.

The plunker is just a representation of the radio button selection problem - what I want to achieve in the data refresh is more complex.

Any help would be much appreciated.

You want it to be changed on the main page while the modal is open? — Aᴍɪʀ, Dec 28 '15 at 16:33
Yes I want it to be changed on the main page - when a selection is made. Basically Hello World should update to Hello 'selection'! But obviously you see it only when u click on OK. — slacker, Dec 28 '15 at 16:34

score 1 · Accepted Answer · answered Dec 28 '15 at 16:38

Instead of modifying the $scope variable for name, modify object property as it keeps the reference change.

change your html part of code to this...

 <div ng-controller="MainCtrl">
      <p>Hello {{data.name}}!</p>
      <button ng-click="OpenModal('sm')">Enter Number</button>
      <br><br>
      <span>You selected {{ data.myNumber }}</span>

  </div>

And your javascript controller to this...

app.controller('MainCtrl', function($scope, $modal) {
  $scope.name = 'World';
  $scope.data = {};

  $scope.OpenModal = function(size){
   var modalInstance = $modal.open({
            templateUrl: 'Modal.html',
            controller: 'ModalInstanceCtrl',
            windowClass: 'small-size-modal',
            size: size,
            scope: $scope
        });
  };
});

app.controller('ModalInstanceCtrl', function($scope, $modalInstance){
  $scope.ok = function(){
    $scope.data.name = $scope.data.myNumber;
    $modalInstance.close();

  };

  $scope.updateValue = function(){
    $scope.data.name = $scope.data.myNumber;
    $modalInstance.dismiss('submit');
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

Working Plunker..

http://plnkr.co/edit/xL4b6imAkvwuNiuBuHxl?p=preview

score 1 · Answer 2 · edited May 23 '17 at 11:52

While other answers seem valid, what I would do for complex data communication is to use a service in between.

As you have two separate controllers, one in your main page and one for the modal, and their $scopes are different, I'd go for using a service for communication between two controllers. You can check this question out for more information on this.

Simply broadcast the changes on your modal, then listen for those changes on your main controller and reflect it on the HTML.

Do something on radio button selection change AngularJS

2 Answers2