angularJS: how to revert / prevent radio button event?

Question

i have a (non-working) example in http://jsfiddle.net/S2kc7/1/

Answer 1

The accepted answer does not covers scenerios which makes ajax calls on model change.

You can completely prevent changes by surrounding radio inputs with label tag.

<label ng-click="confirmChange($event)"><input type="radio" ng-model="value" value="foo" ></label>



$scope.confirmChange = function(event) {
   if(!confirm('sure?')) {
     event.preventDefault();
   } 
};

Answer 2

You can make it work by using ng-change. Make sure that each radio has the ng-change on it

<input type="radio" ng-model="value" value="foo" ng-change="validateChange()">
<input type="radio" ng-model="value" value="bar" ng-change="validateChange()">
<input type="radio" ng-model="value" value="zaz" ng-change="validateChange()">

And you can use this logic in your controller

$scope.value= $scope.preval= 'foo';
$scope.validateChange = function() {
    if(confirm('revert???  value='+$scope.value+'  preval='+$scope.preval)) {
        $scope.preval = $scope.value;
    } else {
        $scope.value = $scope.preval;
    }
};

Updated and working fiddle http://jsfiddle.net/S2kc7/3/