AngularJS: Conditional Statements not working in angular JS method of controller

Problem

I have a below code:

<!DOCTYPE html>
<html data-ng-app>
<head>
<title></title>
<style>
.menu-disabled-true {
color: gray;
}
.menu-disabled-false {
color: red;
}

.menu-disabled-green {
color: green;
}
</style>
</head>
<body >
<script src="angular.min.js"></script>
<script>
function DeathrayMenuController($scope) {
$scope.isDisabled = false;
$scope.stun = function() {
// stun the target, then disable menu to allow regeneration
if($scope.isDisabled == 'false'){
    $scope.isDisabled = 'true';
}else if($scope.isDisabled == 'true'){
       $scope.isDisabled = 'green';
}
};
}
</script>
<div ng-controller='DeathrayMenuController'>
<ul>
<li class='menu-disabled-{{isDisabled}}' ng-click='stun()'>Stun</li>
</ul>
</div></body>
</html>

Now, whenever I click on the Stun <li> then i expect it to change color as per method inside the controller.

Can Someone help me in understanding why it isnt working?

Problem courtesy of: Padyster

Solution

The problem is that you are comparing string value and boolean value.
Change the declaration to 'false' (string)

$scope.isDisabled = 'false';
$scope.stun = function() {
// stun the target, then disable menu to allow regeneration
if($scope.isDisabled == 'false'){
    $scope.isDisabled = 'true';
}else if($scope.isDisabled == 'true'){
       $scope.isDisabled = 'green';
}
};
Solution courtesy of: CodingNinja

Discussion

If you use the simple HTML class attribute angular evaluates the expression only once (or never).

You have to use ng-class. Something like this:

<li ng-class="{'menu-disabled-green': isDisabled == true, 
'menu-disabled-true': isDisabled == false}" >Stun</li>

From the docs:

Expression to eval. The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.

Discussion courtesy of: TheHippo

This recipe can be found in it's original form on Stack Over Flow.