Empty Skeleton for AngularJs

jomendez.com www.lorem-ipsum-html.com

HTML

<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div ng-controller="playerController as vm">
    <div custom-hover ng-repeat="character in vm.characters">
        <div>{{character.name}}</div>
</div>

CSS

.hovering{
    color: red;
}

JavaScript

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

myApp.controller('playerController', playerController)
myApp.directive('myDirective', function () {});
//myApp.factory('myService', function() {});

myApp.directive('customHover', function () {
    return {
        link: function (scope, element, attr) {
            $(element).hover(
            function () {
                $(this).addClass('hovering');
                //alert("Class added");
            },

            function () {
                $(this).removeClass('hovering');
                //alert("Class removed")
            });
        }
    }
});

function playerController() {
	this.characters = [{name: "name1"}, {name: "name2"}, {name: "name3"}, {name: "name4"},];
}