Cannot change background color of checkbox button in Angular UI

Question

In this plunk I have an Angular UI checkbox button that when active (i.e. pushed) needs to display yellow background with red fonts. That means that if you click multiple times, the colors should change from yellow background to blue background and so on. Still, since when you click the button has the focus, it doesn't change the colors and the background is always blue. How to fix this?

HTML

  <style>
    .my-active-class {
      background-color: yellow;
      color: red;
    }
  </style>

  <div ng-controller="ButtonsCtrl">
   <buttondir></buttondir>
  </div>

Javascript

var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('ButtonsCtrl', function($scope) {
});

app.directive('buttondir', function (uibButtonConfig) {

    uibButtonConfig.activeClass = 'my-active-class';

    var directive = {};

    directive.restrict = 'EA';

    directive.scope = {
      control: '='
    };

    directive.template = '<button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox ' +
    ' btn-checkbox-true="1" btn-checkbox-false="0"> Single Toggle </button>';

    directive.link = function (scope, element, attrs) {
      scope.singleModel = 1;
    };

    return directive;

});

Answer 1

Hi Please find the updated answer here!

The problem was that .btn-primary:focus is also applying with .my-active-class

So In solution to that, I have override bootstrap by default class to .my-active-class

.my-active-class, .my-active-class:focus {
  background-color: yellow;
  color: red;
}

Please find working plunker here: http://plnkr.co/edit/PuNRtiTZ25JV0zJL1UCn?p=preview

Cheers!