Angular: radiobuttons stop firing “ng-change” after each one was clicked

Question

I am building radio buttons dynamically. ng-change=\'newValue(value) stops being called after each radio button has been pressed once.

this works: Click

Answer 1

Try ng-click instead of ng-change.

Answer 2

Just a quick work-around, we can achieve the same- using ng-model="$parent.value", because it would refer to the parent of ng-repeat scope i.e- in myCtrl scope

Only Change in ng-model-

<input name="asdf" type="radio" ng-model="$parent.value" value={{i}} ng-change='newValue(value)'>

Here is the fiddle

Answer 3

ngRepeat creates new scope, so trying to set value sets it on the new scope. The workaround is to reference a property on an object that is on the parent scope--the object lookup happens on the parent scope, and then changing the property works as expected:

HTML:

<div ng-controller="MyCtrl">
<span ng-repeat="i in [0, 1, 2]">
  <input name="asdf" ng-model="options.value" value="{{i}}" type="radio">
</span>
{{options.value}}

JS:

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

function MyCtrl($scope) {
    $scope.options = {
        value: '-'
    };
    $scope.newValue = function(value) {
        // $scope.options.value = value; // not needed, unless you want to do more work on a change
    }
}​

You can check out a working fiddle of this workaround. See angular/angular.js#1100 on GitHub for more information.