angularjs - How to handle model change before click event with input[radio] and objects -

i'm trying implement directive uncheckable radio buttons.

context:
customer asked feature user can reuse same form different criterias, ie being able deselect used fields. in case of field, want stay radio button, not select.

my current plunker available here (not working).

i've succeeded method in ng-click when radio button's model uses simple string values. (see 'sexe' field in plunker example)

but totally fails when model uses objects.

ive tried $viewchangelisteners doesnot trigger on reclicking on same radio button, ie considers no change... same problem $parsers , ng-change.
seems ng-click triggers after model changes...
ideally i'd reset model if radio button checked, problem $modelvalue , :checked changed when checking in element.on("click")

so i'm trying directive in toggleradiocheckedstate.js:

(function () {      'use strict';      angular          .module('formexample', [])          .controller('formcontroller', formcontroller);              function formcontroller () {          var vm = this;          var defaultcriteres = {              site: null          };          vm.sites = [              { id: 1, name: 'nantes', address: 'address1' },              { id: 2, name: 'lille', address: 'address2' },              { id: 3, name: 'lyon', address: 'address3' }          ];    }  })();    (function () {      'use strict';      angular          .module('formexample')          .directive('togglecheckstate', togglecheckstate);            function togglecheckstate ($parse) {          return {              restrict: 'a',              require: 'ngmodel',              link: function (scope, element, attributes, ngmodelcontroller) {                  var lastcheckedvalue = null;                  element.on('click', function (event) {                      var test = angular.equals(                          ngmodelcontroller.$viewvalue,                          lastcheckedvalue                      );                      console.log(                        'lastcheckedvalue before', lastcheckedvalue,                        '\n$viewvalue', ngmodelcontroller.$viewvalue,                        '\nevent.target.value', typeof event.target.value,                        '\ntest', test                      );                      if (!test) lastcheckedvalue = ngmodelcontroller.$viewvalue;                      else {                          ngmodelcontroller.$setviewvalue(null);                          event.target.checked = false;                          lastcheckedvalue = null;                      }                      console.log('lastcheckedvalue after', lastcheckedvalue, "\n================================\n");                  });              }          }      }  })();

<script src="//unpkg.com/angular/angular.js"></script>  <form  ng-app="formexample" ng-controller="formcontroller ctrl">      <label ng-repeat="site in ctrl.sites">          <input type="radio" name="site" ng-model="ctrl.criteres.site"                 ng-value="site" toggle-check-state>          {{site.name}}      </label>  </form>

the problem i'm first getting desired behavior on single radio button, check other radio button come previous radio button, behavior fails...

i don't understand why internal var lastcheckedvalue not update properly...