Animating ng-include flip - css

Question

I'm new to css transitions and am experimenting with trying to animate the transition between two sub templates that I am including in my angularjs project using ng-include.
I am attempting to replicate the effect seen here (click on the flip option in the dropdown). However I can't seem to get the newly added template to animate its entrance correctly. The leaving template 'flips' out but the entering template just appears rather than 'flipping' in.
My page has the following basic structure:
<div class="content">
<div class="page flip" ng-include="something"></div>
</div>
I am using the following css:
.content {
-webkit-perspective: 600px;
perspective: 600px;
position:relative;
}
.page{
position:absolute;
background:red;
}
.content .page.flip {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.content .page.flip.ng-enter {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.content .page.flip.ng-enter-active {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.content .page.flip.ng-leave {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.content .page.flip.ng-leave-active {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
I've made a plunker by adapting the ng-include demo from angular website here to illustrate problem.
Can anyone point me to where I am going wrong?