AngularJS - FuelUX checkbox bootstrap conflict

angular-fuelux-bootstrap-checkbox.md

I was trying to use a simple checkbox on a form, so I just copied the sample from bootstrap. But I forgot that I was using FuelUX on that form, so it never showed the checkbox. Apparently, there's a problem mixing checkbox controls -at least in this case-.

So, my form was like this

<form name="editForm" role="form" novalidate>
    <div class="fuelux">
        ...
            <div class="modal-body">
            <div class="wizard" data-initialize="wizard" id="myWizard">
            ...

I'm using a wizard control inside a modal dialog. Well, it didn't show up but the label. So instead, of using the bootstrap checkbox sample code I opted for using the FuelUX checkbox.

<div class="checkbox" id="myCheckbox">
  <label class="checkbox-custom" data-initialize="checkbox">
    <input class="sr-only" type="checkbox" value="">
    <span class="checkbox-label">Custom checkbox unchecked on page load</span>
  </label>
</div>

now the checkbox was displaying just fine. It's time to bind that the model, so I just added an ng-model attribute like so

<div class="checkbox" id="myCheckbox">
<label class="checkbox-custom" data-initialize="checkbox">
    <input class="sr-only" type="checkbox" value=""
           ng-model="audiencia.privada">
    <span class="checkbox-label">Custom checkbox unchecked on page load</span>
</label>
</div>

and it worked great, but only one way. I mean, when you tick the checkbox it updates the model, but if you update the model -anyhow- it won't change it's displayed value (won't check or uncheck). So, you have to update the checkbox state by adding a ng-class attribute, which will add or remove a 'checked' class according to the model.

Finally, we have this working like a charm

<div class="checkbox" id="myCheckbox">
<label class="checkbox-custom" data-initialize="checkbox"
       ng-class="{checked: audiencia.privada}">
    <input class="sr-only" type="checkbox" value=""
           ng-model="audiencia.privada">
    <span class="checkbox-label">Privada</span>
</label>
</div>

Sources: https://docs.angularjs.org/api/ng/directive/ngChecked https://docs.angularjs.org/api/ng/directive/ngClass