Cannot change background color of checkbox button in Angular UI

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;

});