AngularJS - Blank Template

HTML

<div data-ng-app="myApp">
    <div data-ng-controller="MyCtrl">
        
        <ul class="ng-trans ng-trans-fade-right easeInOutBack" data-ng-if="viewModel.beatles" data-ng-repeat="beatle in viewModel.beatles">
            <li>{{beatle}}</li>
        </ul>
        
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/foundation.min.css"> 
<link rel="stylesheet" href="//rawgit.com/minipai/ng-trans.css/master/ng-trans.min.css"> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular-animate.min.js"></script> 
<style>

JavaScript

//Include angular-ui dependency in resources on the side and as 'ui'
angular.module('myApp', ['ngAnimate'])

.controller("MyCtrl", function ($scope, $timeout) {
    $scope.viewModel = {
        test: ['Lorem Ipsum1', 'Lorem Ipsum2', 'Lorem Ipsum3'],
        beatles : []
    };

    $timeout(function(){
        $scope.viewModel.beatles = ["George", "Ringo", "Paul", "John"];
    });
})


.directive('json', function ($parse) {
    return {
        restrict: 'E',
        transclude: true,       
        template: '<pre>{{ content | json}}</pre>',
        compile:function (element, attr, transclusionFunc) {
            return function (scope, iterStartElement, attr) {
                var $origElement = transclusionFunc(scope);
                var content = $origElement.html();                
                scope.content = scope.$eval(content);                
            };
        }
    };
});