toaster.clear('*') does not work inside a jQuery function

Question

I'm using Angular toaster messages. I use toaster.clear('*') to clear a toaster message and show the next toaster message. This works fine in my other situations.

However here it does not work. I clear the previous toaster message and change the text of the toaster, but the message changes only when I hover over it.

$("#pageColorPallette").change(function() {
  if ($scope.questionNumber == 1) {
    selectedcoler = $("#pageColorPallette").spectrum("get");
    selectedhexacoler = selectedcoler.toHexString();
    toaster.clear('*');
    var content = document.getElementById("editableTextArea");
    content.style.backgroundColor = selectedhexacoler;
    if (selectedhexacoler == '#ffffff') {
      if ($scope.attempts < 3) {
        $scope.addMarksGeneric($scope.activityThreeMarks, 10);
      }
      toaster.clear('*');
      toaster.pop({
        type: 'info',
        title: 'step 2',
        body: ' body of step two message',
        toasterId: 2
      });
      $scope.questionNumber = $scope.questionNumber + 1;
    } else {
      $scope.deductMarksGeneric($scope.activityThreeMarks, 5);
      toaster.pop({
        type: 'error',
        title: 'try again',
        body: 'please try again.',
        toasterId: 2
      });
    }
  } else {
    $scope.deductMarksGeneric($scope.activityThreeMarks, 5);
    toaster.pop({
      type: 'error',
      title: 'try again',
      body: ' Please continue according to the steps.',
      toasterId: 2
    });
  }
});