Angular ui-bootstrap-datepicker change color on click

Question

I'm using ui.bootstrap.datepicker. How can I change the color of a date when I press a button? The styles for 'full' and 'partially' are applied at the beginning, but when I change 'events', I see no change.

$scope.events = [
        {
            date: new Date(),
            status: 'full'
        },
        {
            date: new Date(),
            status: 'partially'
        }
    ];

vm.open = function () {
        $scope.events[0].date = new Date(2018, 0, 1);
        return $scope.events[0].status;
    }

Answer 1

What I've done is I've added an ng-change to the element and I'm calling a function every time the model changes (when you click a datepicker button).

Then I filter the events and remove the one with the matching date

HTML

<div style="display:inline-block; min-height:290px;">
  <div uib-datepicker ng-model="dt" ng-change="clickOnDate(dt)" 
  class="well well-sm" datepicker-options="options"></div>
</div>

JS

$scope.clickOnDate = function(dt) {
    $scope.events = $scope.events.filter(function(d) {
        return (
          !(d.date.getFullYear() === dt.getFullYear() &&
            d.date.getMonth() === dt.getMonth() &&
            d.date.getDate() === dt.getDate())
        );
    })
}

I'm using the Array.prototype.filter method above.

Demo plunker