AngularJS ng-class updating content

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>