ng-class not working inside modal with radio

[livertonoliveira]

Hi,

The bug is the following:

I have one modal:

<script type="text/ng-template" id="add-groups.view.html">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Editar Grupo</h4>
    </div>
    <div class="modal-body">
        <div class="row">
    <div class="col-lg-12">
        <form name="groupUpdate" ng-submit="vm.updateGroup()">
            <div class="row">
    <div class="col-lg-12">
        <div class="form-group">
            <label for="">Nome</label>
            <input type="text" class="form-control" placeholder="Nome do Grupo" ng-model="vm.group.name" ng-required="true">
        </div>
    </div>
    <div class="col-lg-12">
        <div class="form-group">
            <label for="l31">Ativo</label>
            <br>
            <div class="btn-group">
                <label class="btn btn-success-outline" 
                       ng-model="vm.group.active" 
                       ng-class="{'active': vm.group.active === true }" 
                       uib-btn-radio="'true'">
                       Sim
                </label>
                <label class="btn btn-secondary-outline" 
                       ng-model="vm.group.active" 
                       ng-class="{'active': vm.group.active === false }" 
                       uib-btn-radio="'false'">
                       Não
                </label>
            </div>
        </div>
    </div>
</div>
        </form>
    </div>
</div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary width-150" type="button" ng-click="vm.update()">Salvar</button>
        <button class="btn btn-default" type="button" ng-click="vm.cancel()">Cancelar</button>
    </div>
</script>

I discovered that when combined with radio, the ng-class do not work as expected.

If you try changing to:

<div class="btn-group" ng-class="{'active': vm.group.active === true }" >

Just for experience, you'll see that the following works well .

[bastienmoulia]

You should not use uib-btn-radio with ng-class="{'active': ... }" because uib-btn-radio will also add a class active to your element when ti match the ng-model.

In your case yon can remove the ng-class and change uib-btn-radio="'true'" by uib-btn-radio="true" (without the quote).

[livertonoliveira]

Awesome @bastienmoulia ! Thank you !!!