在Angular JS中默认选中自定义单选按钮组件

Question

我正在使用角度js为单选按钮创建自定义组件。一切正常，但我无法在默认情况下设置所需的单选按钮。

我的代码如下

JS组件

angular.module("customButtons")
    .component("ngRadiobutton", {
        template:        
             '<label class="ng-control-radio-button">' +
             '<span data-ng-bind="$ctrl.label"></span>' +
             '<input type="radio" name="{{$ctrl.group}}" data-ng-model="$ctrl.checked"/>' +
             '<div class="ng-control-indicator-radio"></div>' +
             '</label>' +
             '',       

        bindings: {
            label: '@',
            checked: '=',
            group: '@'
        },
        controller: function () {
            var $ctrl = this;
        }
    });

HTML

<ng-radiobutton label="Label 1" group="group1"></ng-radiobutton>
<ng-radiobutton label="Label 2" group="group1" checked="true"></ng-radiobutton>
<ng-radiobutton label="Label 3" group="group1"></ng-radiobutton>

SCSS

.ng-control-radio-button{
 position: relative;
 padding-left: 27px;
 cursor: pointer;
 font-size: inherit;
 input[type="radio"]{
     position: absolute;
     z-index: -1;
     opacity: 0;
 }
 .ng-control-indicator-radio {
     position: absolute;
     left: 0;
     background: #fff;
     height: 16px;
     width: 16px;
     box-sizing: border-box;
     top: 50%;
     transform: translateY(-50%);
     font-family: nielsen-icons;
     &:after {
         content: '\e959';  
         color: $input-control-border;
         cursor: pointer;        
     }
 }
 input[type="radio"]:checked ~ .ng-control-indicator-radio {
     &:after {
         content: '\e958';
         color: $color_forest_green;
          font-family: nielsen-icons;
     }
 }

}

任何建议将不胜感激。提前谢谢。