How can I remove :active from bootstrap button

Question

I have a website, where I have multiple buttons. Once a button is pressed I populate a list, though my problem is that the last pressed button keeps to be looking pressed (has the :active class). I thought about using angular's $timeout to reset the button, though the removeClass function doesn't do the trick.

My view looks like this:

    div(ng-controller='productButtonController')
    div(ng-repeat='product in products')
        div.col-md-4
            button.btn.btn-block.sell-button(id='{{product._id}}' ng-click='sell()'){{product.name}}

and my controller:

app.controller('productButtonController', ['$scope', '$timeout', 'productServices', 'flash',
    function($scope, $timeout, productServices, flash) {
        productServices.getProducts()
            .success(function(result) {
                $scope.products = result.data
            })
            .error(showErrorMessage(flash))

        $scope.sell = function() {
            console.log(this.product)
            that = this
            $('#' + that.product._id).removeClass('active')
        }
    }
])

Answer 1

1. Add the angular $window service to your dependencies for the controller
2. Call the blur method on the document's active element, which will be your button.

$window.document.activeElement.blur();

See How do you clear the focus in javascript?.

Answer 2

This code from Justin Poehnelt's handy GIST solves this elegantly.

app.directive('blur', [function () {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.on('click', function () {
                element.blur();
            });
        }
    };
}]);

Add the blur attribute to a button/element you need blurred after click. Eg.

<button type="button" blur>Click me</button>