AngularJS ng-class updating content - css

Question

I've got some code in AngularJS here working half percent (I will explain) :
<button ng-class="{'svgMinus-dark': isDarkTheme, 'svgMinus': !isDarkTheme}"></button>
I also tried another writing to say the same :
<button ng-class="{'svgMinus-dark': true-condition, 'svgMinus': !isDarkTheme}" href=""></button>
And I got exactly the same result (and problem). My problem is, when I do set isDarkTheme to true (working), the class doesn't edit instantly. I have to click on my button. And I don't know why, when the $scope edits itself, the class doesn't toggle instantly.
Why do I have to click to see the class of my true-condition (or false condition) update ?... Is there a way to force my ng-class update when my $scope.isDarkTheme toggle to true or false ?
thanks a lot in advance, I'm getting less and less hair haha

Answer 1

Here is a working example. It might not help you, but you can use it (copy it) to edit your question and create a snippet to demonstrate your code.
angular.module('myApp', [])
.controller('myCtrl', ['$scope', '$timeout', function($scope, $timeout) {
$scope.isDarkTheme = false;
$scope.toggleDarkMode = function() {
$scope.isDarkTheme = !$scope.isDarkTheme
};
$timeout($scope.toggleDarkMode, 2000)
}]);
div {
padding: 20px;
height: 100%;
}
.is-dark {
background: #111;
}
.is-dark h1 {
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" ng-class="{'is-dark': isDarkTheme}">
<h1>Toggle in 2 seconds</h1>
<button ng-click="toggleDarkMode()">Toggle dark mode</button>
</div>