javascript - ng-change not working with radiobutton -

javascript - ng-change not working with radiobutton -

i have code this:

<div class="form-group"> <div class="col-sm-8 col-md-offset-4"> <label class="ui-radio"><input name="radio1" type="radio" value="a" ng-model="$data.choice" ng-change="onchoice()"><span>a</span></label> </div> </div> <div class="form-group"> <div class="col-sm-8 col-md-offset-4"> <label class="ui-radio"><input name="radio1" type="radio" value="b" ng-model="$data.choice" ng-change="onchoice()"><span>b</span></label> </div> </div>

as can see, there's $data.choice ng-model should trigger "onchoice()" function when changed, defined @ controller (the ng-controller defined @ view , works properly). problem function doesn't trigger, if erase "$data" , leave ng-model="choice" works perfectly.

$data variable defined me @ $scope. can trigger onchoice() button , ng-click, doesn't work ng-change. guess it's problem ng-change don't know what's happening.

edit

ok see it's not simple, i'll add together information:

here's controller, includes interaction $parent controller don't know if affect:

$scope.data = $scope.$parent.data; $scope.data.choice = $scope.data.choice || 'vote'; $scope.onchoice = function(){ //stuff };

i know logic when initilizing variable seems unusual that's important, simplified code. maybe alter logic in order utilize $scope.choice instead of $scope.data.choice, still want know why isn't working.

even though "ng-model" there, "onchoice" function working fine. 1 time check controller logic.

i wrote sample program. , check out in plunkr

angular.module('todoapp', []) .controller('todocontroller', ['$scope', function($scope) { $scope.onchoice = function(){ alert("changed."); }; }]);

javascript html angularjs