Angular Mouseover Directive

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController as vm">
    <h1 it-click="vm.click()" it-mouseover="vm.mouseover()">Hello {{ vm.name }}!</h1>
  </body>

</html>

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

app.controller('MainController', function() {
  var vm = this;
  
  vm.name = 'Daniel';
  
  var count = 0;
  vm.mouseover = function() {
    count += 1;
    console.log('mouseover count: ' + count);
  };
  
  var clickCount = 0;
  vm.click = function() {
    clickCount += 1;
    console.log('click count: ' + clickCount);
  }
});

app.directive('itMouseover', function itMouseover() {
  return {
    scope: {},
    restrict: 'A',  // custom attribute
    link: function (scope, element, attrs) {
      // you can use jQuery here
      $(element).on('mouseover', function () {
        console.log('mouseover');
        scope.$eval(attrs.itMouseover);
      });
    }
  };
});

/* Styles go here */