ng-enter not loading in when content loads angularjs - angularjs

Question

I have the following angularjs application which loads content from Instagram, however, on page load I would like to fade the loaded content in with a smooth transition.
I added {{ loadedClass }} to the main HTML tag but it doesn't seem to place ng-enter within it when it loads:
HTML
<script src="bower_components/angular/angular-animate.js"></script>
<section ng-controller="ShowImages as images" class="page {{ loadedClass }}" ng-view>
CSS
.page.ng-leave {
-webkit-animation: fadeOut 0.6s both ease-in;
-moz-animation: fadeOut 0.6s both ease-in;
animation: fadeOut 0.6s both ease-in;
}
/* line 697, ../sass/app.scss */
.page.ng-enter {
-webkit-animation: fadeIn 2s both ease-in;
-moz-animation: fadeIn 2s both ease-in;
animation: fadeIn 2s both ease-in;
}
**Controller
var app = angular.module('instafeed', ['ngAnimate']);
app.filter('getFirstCommentFrom',function(){
return function(arr, user){
for(var i=0;i<arr.length;i++)
{
if(arr[i].from.username==user)
return arr[i].text;
}
return '';
}
})
What am I doing wrong?
See here:
http://machinas.com/wip/machinas/instagramfeed/
I get this console error:
Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- $animate <- $compile
http://errors.angularjs.org/1.2.22/$injector/unpr?p0=%24%24qProvider%20%3C-%20%24%24q%20%3C-%20%24animate%20%3C-%20%24compile
return new Error(message);

Answer 1

The class 'page' should go on each of your item, not the container:
<ul ng-show="layout == 'grid'" class="page grid">
<li></li>
</ul>
That is the ul who are entering and leaving when you change tabs, not the section

Answer 2

Knowing how events work, your ng-view is in the same level as ng-controller so when the event is emitted it doesn't "see" it. When events are emitted they are emmited to its parents.
I suggest the following in your HTML:
<section ng-controller="ShowImages as images" class="page {{ loadedClass }}" >
<div ng-view>
<!-- The rest of your code -->
</div>
</section>
EDIT
Sorry, I mislead you. I confused $emit with $broadcast.
EDIT 2
Looking at your HTML, you are not using ng-views correctly. The ng-views are supposed to be used together routes. That explains why the event is not firing. In your code, you are not loading a view at all.
EDIT 3
Look into animating the ng-cloak directive; you will be able to achieve just about the same result without views. What you are trying to do is not very complex and you seem to be starting out so I recommend skipping ng-view for now :)