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',
		controller: function ($scope, $timeout) {
			// do we have statrted timeout
			var timeoutStarted = false;
			
			// pending value of mouse state
			var pendingMouseState = false;

			$scope.changeMouseState = function (newMouseState) {
				// if pending value equals to new value then do nothing
				if (pendingMouseState == newMouseState) {
					return;
				}
				// otherwise store new value
				pendingMouseState = newMouseState;
				// and start timeout
				startTimer();
			};

			function startTimer() {		
				// if timeout stated then do nothing
				if (timeoutStarted) {
					return;
				}
				
				// start timeout 10 ms
				$timeout(function () {
					// reset value of timeoutStarted flag
					timeoutStarted = false;
					// apply new value
					$scope.mouseOver = pendingMouseState;
				}, 10, true);
			}
		},
		link: function (scope, element) {
			//**********************************************
			//	bind to "mouseenter" and "mouseleave" events
			//**********************************************
			element.bind('mouseover', function (event) {
				scope.changeMouseState(true);
			});

			element.bind('mouseleave', function (event) {
				scope.changeMouseState(false);
			});
			
			//**********************************************
			//	watch value of "mouseOver" variable
			// or you create bindings in...