Angular radio button listing with ng-repeat - angularjs

Question

How can i clear radio buttons checked status when click on 'clear' buttons ?
Listing radio buttons in ng-repeat,
<label ng-repeat="item in items">
<input type="radio" name="test" ng-model="test" value="{{item.name}}" />{{item.name}}
</label>
<a class="undo" ng-click="clear()">Clear</a>
fiddle
And is it possible clear checked status from another controller ?

Answer 1

This will works fine..!!!
angular.module("myApp", []).controller("Example", ["$scope", function($scope) {
$scope.data = {};
$scope.items = [
{name: 'one'},
{name: 'two'},
{name: 'three'},
{name: 'four'},
{name: 'five'},
];
$scope.clear = function(){
$scope.data = {};
//alert("hello");
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Example">
<label ng-repeat="item in items">
<input type="radio" name="test" ng-model="data.test" value="{{item.name}}" />{{item.name}}
</label>
<br>
<a class="undo" ng-click="clear()">Clear</a>
</div>

Answer 2

You can use a broadcast event. See this answer: https://stackoverflow.com/a/19498009/4161992
Then in your controller that controls your input radio, do this:
.controller('radioController', function($scope){
$scope.$on('triggerClearRadio', function(){
$scope.items.forEach(function (item, i) {
item.checked = false;
});
});
});
Change your input html to use ng-model="item.checked" instead of ng-model="test"
From your clear button you can broadcast the 'triggerClearRadio' event (name it something better though) like this:
<button type="button" ng-click="$root.$broadcast('triggerClearRadio')>Clear radios</button>
See this fiddle: http://jsfiddle.net/takuan/aaoub2mg/