Angular animate not working with swappable divs

I'm trying to make animated transitions when swapping two divs using ng-show and ng-hide on both. This is currently my code:

            <div ng-show="loginToggler === 'register'">
Register
            </div>
            <div ng-show="loginToggler === 'login'">
Login
            </div>

My css partial for animating :

.ng-hide-add         { animation:0.5s lightSpeedOut ease; }


.ng-hide-remove      { animation:0.5s lightSpeedIn ease; }

Animations are working properly only when the first div is appearing/disappearing. None of suitable transition effects apply on my second div (it works the same way when I swap my divs position in code - only the one which is earlier in my code has the transition effects applied).