Angular custom checkbox directive doesnt work in ng-repeat

I have created a custom directive for checkbox which can be used across my application. i have created the checkbox with the following code.

JS

angular.module("myApp")
    .component("ngCheckbox", {
       template:
           '<div class="ng-control-checkbox">' +
           '<input id="check" type="checkbox" data-ng-model="$ctrl.checked" class="checkbox">' +
           '<label for="check">'+
           '<span data-ng-bind="$ctrl.label"></span>' +
           '</label>' +
           '</div>' +
           '',   

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

CSS

  .ng-checkbox label{
      cursor: pointer;
      margin-left: 20px;
  }
  .ng-checkbox label:before {
     content: "\e911";
     cursor: pointer;
     color: #84919A;
  }
  .checkbox {
    display: none;
  }
  .checkbox:checked + label:before {
   content: "\e910";
    cursor: pointer;
    color: $color_forest_green;
  }

HTML

      <div data-ng-repeat="notification in notificationList" >
        <ng-checkbox data-checked="notification.selected"></ng-checkbox>
      <div>

• Im using CSS ::before to change the content. i do not want to write any JS for this.
• i cant change the HTML structure as i have to use the application specific icons as CSS content for the checkbox

Issue

As i am binding the id of the checkbox with the for of the label i am not able to use this checkbox directive inside ng-repeat. i am hoping to get a solution for this as i am stuck on this.

Thanks in advance.