Bootstrap Buttons Don't De-select Properly

[jvgeee]

If you look at the Bootstrap documentation: http://getbootstrap.com/javascript/#buttons-examples

1. Example for "Single Toggle" is how the Angular-UI Bootstrap checkboxes currently behave. Select a button, then unselect it - notice that it's still darkened even though it's been deselected. Once you click away from the buttons anywhere else on the page, it returns to the normal colour.
2. Example for "Checkbox" is how radio/checkbox buttons should be, in that if you deselect an item the colour changes immediately on-click.

Is there any way to get this functionality up and running with Angular Boostrap? It's pretty bad UX for a user to not get correct feedback after un-selecting a checkbox!

Here's a hacky way around it using the Bootstrap method of having a <label> as the button, then an <input> as the checkbox:

View:

<div class="btn-group" data-toggle="buttons"> // data-toggle="buttons" doesn't do anything here except it calls the necessary CSS class to hide the input checkbox
    <label class="btn btn-default">
        <input type="checkbox" btn-checkbox> // Bootstrap sets this to display:none
        Label Name
    </label>
</div>

Controller:

 $scope.clickToggle = function($event){
    var elem = angular.element($event.srcElement);
    if(elem.hasClass('active')){
        elem.removeClass( "active" );
    }else{
        elem.addClass('active');
    }
 }

This workaround works quite well but I reckon an in-built solution for the Angular-UI checkboxes would be much better!

[pkozlowski-opensource]

Yes, BS3 introduced new markup for buttons. We are not going to hold the BS3 release for this one but it should be fixed.