checkbox not styled with bootstrap

[velteyn]

Expected behaviour

The checkbox should hook with bootstrap syling

Actual behaviour

Bootstrap style is missed

Gist/Plunker/Demo

according to this http://embed.plnkr.co/B4BatpwxCa2cBoYo0oEQ/

label + checkbox should be put in this way:

<div class="checkbox">
            <input id="checkbox1" class="styled" type="checkbox">
            <label for="checkbox1">
                      Default
            </label>
 </div>

but you render the checkbox in this way:

<div class="checkbox ng-scope" ng-repeat="val in titleMapValues track by $index">
<label>
           <input type="checkbox" ng-disabled="form.readonly" sf-changed="form" class="" ng-model="titleMapValues[$index]" name="mycheck"> 

<span ng-bind-html="form.titleMap[$index].name" class="ng-binding">
value 1
</span>
</label>
</div>

so the bootstrap css

input[type="checkbox"].styled:checked + label::after, input[type="radio"].styled:checked + label::after {
    font-family: 'FontAwesome';
    content: "\f00c";
}

will never select the checkbox and you obtain a normal HTML checkbox.

Related issues

The result is also that the checkbox pin is not displayed. I had to remove the bootstrap css for the label to be able to see the pin.