AngularJS自己的指令 - 双向绑定

Question

我实现了自定义复选框指令，现在我已经遇到了跟随代码：

.directive( 'customCheckbox', function() {
return {
            require:"ngModel",
    templateUrl: 'checkbox/checkbox.html',
    link: function( scope, element, attrs, ngModel) {

                scope.$watch(function(){
                    return ngModel.$modelValue;
                }, function(modelValue){
                    ngModel.$render();
                });

                //ui->model
                element.bind("click", function(){
                    scope.$apply(function(){//change value, it will be rendered automatically
                        ngModel.$setViewValue(!ngModel.$modelValue);
                    });
                });

                //model -> UI
                ngModel.$render = function () {
                    //value has already changed, set proper classes on elements
                    if (ngModel.$modelValue == true) {
                        element.addClass("active").removeClass('voided')
                                .find('div').addClass("active").removeClass('voided');
                    }else{
                        element.addClass("active").removeClass('voided')
                                .find('div').removeClass("active").addClass('voided');
                    };
                };

    },

} });

问题是，当我将模型绑定到复选框时，当我使用我的指令更改值时，一切正常，但是我使用复选框进行的不幸更改未反映在我的指令上，我无法弄清楚原因。

我正在使用AngularUI radioButton和this page检查解决方案。