title: Make custom radio button component checked by default in Angular JS
body: <p>I am creating a custom component for radio button using angular js. Everything works fine except i am unable to set the desired radio button checked by default.</p>
  
  <p>My code is as follows</p>
  
  <p><strong>JS Component</strong> </p>
  
  <pre><code>angular.module("customButtons")
      .component("ngRadiobutton", {
          template:        
               '&lt;label class="ng-control-radio-button"&gt;' +
               '&lt;span data-ng-bind="$ctrl.label"&gt;&lt;/span&gt;' +
               '&lt;input type="radio" name="{{$ctrl.group}}" data-ng-model="$ctrl.checked"/&gt;' +
               '&lt;div class="ng-control-indicator-radio"&gt;&lt;/div&gt;' +
               '&lt;/label&gt;' +
               '',       
  
          bindings: {
              label: '@',
              checked: '=',
              group: '@'
          },
          controller: function () {
              var $ctrl = this;
          }
      });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ng-radiobutton label="Label 1" group="group1"&gt;&lt;/ng-radiobutton&gt;
  &lt;ng-radiobutton label="Label 2" group="group1" checked="true"&gt;&lt;/ng-radiobutton&gt;
  &lt;ng-radiobutton label="Label 3" group="group1"&gt;&lt;/ng-radiobutton&gt;
  </code></pre>
  
  <p><strong>SCSS</strong></p>
  
  <pre><code>.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;
       &amp;:after {
           content: '\e959';  
           color: $input-control-border;
           cursor: pointer;        
       }
   }
   input[type="radio"]:checked ~ .ng-control-indicator-radio {
       &amp;:after {
           content: '\e958';
           color: $color_forest_green;
            font-family: nielsen-icons;
       }
   }
  </code></pre>
  
  <p>}</p>
  
  <p>Any suggestions will be appreciated. Thanks in advance.</p>