Q: Angular 1 - toggle radio button I need to make a radio button toggle when user click. Is more then 2 buttons.
So, when I click one button if this is selected will no longer be. If is not must be selected.
I try this, but is not works:
app.directive('toggleRadio', function($timeout) {
    return {
        restict: 'A',
        link: function(scope, el, attrs) {
            var radioState;
            el.on('click', function(){
                if (radioState === this) {
                    this.checked = false;
                    radioState = null;
                } else {
                    radioState = this;
                }
                scope.$apply();
            });

        } 
}

It's not require to be a directive... Thanks.

A: Since it's a single radio button and as you said It's not required to be a directive, which doesn't seem to be necessary as well, then you can do something like below:


var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function($scope) {
  $scope.checked = false;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MainCtrl">
    <input type="radio" ng-model="checked" 
    ng-value="true" ng-click="checked=!checked" /> 
    {{checked}}
  </div>
</div>


Updated:
Ideally, you should use checkboxes for such requirement, but if it so necessary to use radio, then do it like below:


var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
  $scope.valChanged = false;
  $scope.checked = "b";
  $scope.toggle = function() {
    if (!$scope.valChanged) {
      $scope.checked = "";
    }
    $scope.valChanged = false;
  }
});
<script src="https://code.angularjs.org/1.5.2/angular.js"></script>
<div ng-app="app">
  <div ng-controller="MainCtrl">
    <br>
    <input type="radio" ng-model="checked" value="a" 
    ng-change="valChanged = true" ng-click="toggle()" />Option A
    <br>
    <input type="radio" ng-model="checked" value="b" 
    ng-change="valChanged = true" ng-click="toggle()" />Option B
    <br>
    <input type="radio" ng-model="checked" value="c" 
    ng-change="valChanged = true" ng-click="toggle()" />Option C
    <hr> {{checked}}
  </div>
</div>



A: I choose to create this directive:
myApp.directive('toggleRadio', [function(){
    return {
        restrict: 'A',
        link: function(scope, el, attrs) {
        el.on("mouseenter", function(e){

            scope.radioStr = e.target.checked;
            console.log('scope.radioStr hover: ', scope.radioStr);

        });

        el.on("click", function(e){

            if(scope.radioStr) {
                e.target.checked = false;
                scope.radioStr = false;
            }
            else {
                e.target.checked = true;
                scope.radioStr = true;
            }

        });
    }
}

}]);
And in HTML I have:

With this approach it will works just when user clicks on input itself, not for label. If somebody wants that, must rewrite this directive to find input status with, el.find(), el.next() etc.
Thanks everyone, all your informations help me to understand what've done! 
