ng-change无法与单选按钮一起使用

Question

I have a code like 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 you can see, there's a $data.choice ng-model that should trigger a "onChoice()" function when changed, defined at the controller (the ng-controller is defined at the view and works properly). The problem is that the function doesn't trigger, but if I erase the "$data" and leave it like ng-model="choice" it works perfectly.

$data is just a variable defined by me at the $scope. I can actually trigger the onChoice() with a button and ng-click, but it doesn't work with the ng-change. I guess it's a problem with ng-change but I don't know what's happening.

Edit

Ok as I see that it's not that simple, I'll add some information:

Here's my controller, It includes some interaction with the $parent controller so I don't know if that could affect:

        $scope.data          = $scope.$parent.data;

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

I know that logic when initilizing the variable seems strange but that's important, I just simplified the code. Maybe I could change my logic in order to use just $scope.choice instead of $scope.data.choice, but I still want to know why isn't this working.

Answer 1

Even though the "ng-model" is there, the "onChoice" function is working fine. Once check your controller logic.

I wrote a sample program. and check out in the Plunkr

angular.module('todoApp', [])
.controller('TodoController', ['$scope', function($scope) {

$scope.onChoice = function(){
  alert("changed.");  
};

}]);