I'm getting a weird conflict when using ng-class with either of the ternary operators:

<!-- language: lang-html -->
<div ng-class="{'red': showDebug, 'blue': !showDebug}" >{{showDebug}}</div>
<div ng-class="showDebug ? 'red' : 'blue'" >{{showDebug}}</div>

Whereas both of these work fine on their own:

<!-- language: lang-html -->
<div ng-class="{'red': showDebug}" >{{showDebug}}</div>
<div ng-class="{'blue': !showDebug}" >{{showDebug}}</div>

I get the following error message:

<!-- language: lang-none -->
TypeError: undefined is not a function
at updateClasses (https://code.angularjs.org/1.2.20/angular.js:18307:22)
at Object.ngClassWatchAction [as fn] (https://code.angularjs.org/1.2.20/angular.js:18318:15)
at Scope.$get.Scope.$digest (https://code.angularjs.org/1.2.20/angular.js:12447:29)
at Scope.$get.Scope.$apply (https://code.angularjs.org/1.2.20/angular.js:12712:24)
at HTMLAnchorElement.<anonymous> (https://code.angularjs.org/1.2.20/angular.js:18980:21)
at https://code.angularjs.org/1.2.20/angular.js:2823:10
at Array.forEach (native)
at forEach (https://code.angularjs.org/1.2.20/angular.js:325:11)
at HTMLAnchorElement.eventHandler (https://code.angularjs.org/1.2.20/angular.js:2822:5) angular.js:9997

Demo in Plunker
<sup>Click on the Debug link. The debug statements above it should change color</sup>

Oddly, this appears related to how I've initialized my module and controller. I'm using both ui.bootstrap and toaster

This will work, but won't bring in toaster:

<!-- language: lang-js -->
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
  $scope.showDebug = true;
});

This doesn't work:

<!-- language: lang-js -->
var app = angular.module('plunker', ['ui.bootstrap', 'toaster']);
app.controller('MainCtrl', function($scope, toaster) {
  $scope.showDebug = true;
});

I've also tried to inject toaster straight into the controller itself, but still doesn't resolve any conflicts:

<!-- language: lang-js -->
var app = angular.module('plunker', ['ui.bootstrap', 'toaster']);
app.controller('MainCtrl', ['$scope', 'toaster', function($scope, toaster) {
  $scope.showDebug = true;
}]);

It took me a while to even get to the point where I've isolated down these components, but now I'm pretty stuck. Any ideas?

There seems to be an incompatibility problem either with ngAnimate or toaster with version of angular you are using.

If you rollback angular to version 1.2.12 the errors disappear.

I would check for more current versions of both, or check github issue tracker for toaster

Update: realized after I wrote this that ngAnimate being used is a much lower version than angular core.

<kbd>DEMO</kbd>