angular.module coffeescript jsfiddle

Trying to get angular.module to work with coffeescript and jsfiddle

HTML

<div ng-app="myApp" >
 <div ng-controller="MovieDataCtrl">
         <table>
          <tr>
            <th ng-click="sortBy('title')">Title</th>
            <th ng-click="sortBy('-ratings.critics_score')">Critics</th>
            <th ng-click="sortBy('-ratings.audience_score')">Audience</th>
          </tr>
          <tr enter ng-repeat="movie in moviedata | filter:search | orderBy:sorting" >
            <!-- style="pointer-events: none;" -->
            <td ><a href="{{'http://www.imdb.com/title/tt'+movie.alternate_ids.imdb}}">{{movie.title}}</a></td>
            <td>{{movie.ratings.critics_score}}</td>
            <td>{{movie.ratings.audience_score}}</td>
          </tr>
        </table>
    </div>
</div>

CSS

td{
    border: 1px solid black;
    width: 120px;
    height:40px;
}

JavaScript

var myapp; 
myapp = angular.module("myApp",[]);

myapp.factory('MovieData' , function(){
    return { 
        movies: [{
            "title": "Wreck-it Ralph",
            "ratings": {
		    	"critics_score": 86,
	    		"audience_score": 89
    		}
        },{
            "title": "Red Dawn",
            "ratings": {
	    		"critics_score": 11,
	    		"audience_score": 56
	    	}
        }]
    }
});

MovieDataCtrl = function($scope, MovieData) {
  $scope.moviedata = MovieData.movies;
  $scope.sorting = "title";

  $scope.sortBy = function(sort) {
    if (sort === $scope.sorting) {
      $scope.sorting = "-" + sort;
    } else {
      $scope.sorting = sort;
    }
  };

};
    
myapp.directive('enter', function(){
  return {
    restrict: 'A', // link to attribute... default is A
    link: function (scope, element){
        // keeps bubbling in child elements... 
      element.bind('mouseenter',function() {
          console.log('MOUSE ENTER: ' + scope.movie.title);
      });
      element.bind('mouseleave',function() {
        console.log('LEAVE');
      });
    }
  }
});