angular animations not working for ng-show when changing class using ng-class

The reason why the animation isn't working is because the === in the functions of your controller.

Instead of the === you should use just = because you don't want to compare $scope.direction with your string.

$scope.left = function() {  $scope.direction = 'left'  if($scope.directionElement > 0)    $scope.directionElement = $scope.directionElement - 1;};$scope.right = function() {  $scope.direction = 'right'  if($scope.directionElement < 3)  $scope.directionElement = $scope.directionElement + 1;};

Now the animation works again.But there are some more things to do if you want a good and correct animation.One of them e.g. is to change your css.If you slow down your animation you can see that the wrong slide-object is animated.

Just change this to correct it:

.slide-object-left.ng-hide-add {  right:-100%;}.slide-object-left.ng-hide-remove,.slide-object-left.ng-hide-add.ng-hide-add-active {  right:0;}.slide-object-left.ng-hide-remove.ng-hide-remove-active {  right:100%;}.slide-object-right.ng-hide-add {  left:-100%;}.slide-object-right.ng-hide-remove,.slide-object-right.ng-hide-add.ng-hide-add-active {  left:0%;}.slide-object-right.ng-hide-remove.ng-hide-remove-active {  left:100%;}

I switched right to left and changed additionally the algebraic sign.You can find the plunk with my changes HERE.

EDIT:I'm not sure why the animation is so buggy. I think it is because the ng-class.I deleted it and edited your ng-show.You can see the edited Plunk HERE.It's not the best solution, but it solves your problem for now I hope. (Maybe you can improve it with THIS fiddle)