diff --git a/example/index.html b/example/index.html
index 9f2bf83..319c1e6 100644
--- a/example/index.html
+++ b/example/index.html
@@ -24,10 +24,10 @@
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
   </head>
 
-  <body ng-controller="MainCtrl" help-overlay>
-    <div class="container">
+  <body ng-controller="MainCtrl" >
+    <div class="container" help-overlay="showHelp" help-start="onStart(event)" help-end="onStop(event)">
       <div class="jumbotron">
-        <button ng-click="hello()">FOOOOOO</button>
+        <button ng-click="toggleHelp()">FOOOOOO</button>
         <h1 data-intro="Project title" data-position="right">Chardin.js</h1>
         <p class="lead">
           Simple overlay instructions for your apps.
diff --git a/example/js/app.js b/example/js/app.js
index 8ef0850..89f0d52 100644
--- a/example/js/app.js
+++ b/example/js/app.js
@@ -1,7 +1,19 @@
-angular.module('app', ['angular-help-overlay']).controller('MainCtrl', function ($scope) {
+angular.module('app', ['angularHelpOverlay']).controller('MainCtrl', function ($scope) {
+  $scope.showHelp = false;
 
-  $scope.hello = function() {
-    var picture = $('.jumbotron img');
+  $scope.onStart = function(event) {
+    console.log('STARTING');
+    return '1';
+  };
+
+  $scope.onStop = function(event) {
+    console.log('ENDING');
+    return '0';
+  };
+
+  $scope.toggleHelp = function() {
+    $scope.showHelp = !$scope.showHelp;
+    /*var picture = $('.jumbotron img');
     if (picture.is(':visible')) {
       return ($('body').data('chardinJs')).toggle();
     } else {
@@ -10,7 +22,7 @@ angular.module('app', ['angular-help-overlay']).controller('MainCtrl', function
       }, 600, function() {
         return ($('body').data('chardinJs')).toggle();
       });
-    }
+    }*/
   };
 
 });
diff --git a/lib/angular-help-overlay.js b/lib/angular-help-overlay.js
index dc8c6bd..1aeb980 100644
--- a/lib/angular-help-overlay.js
+++ b/lib/angular-help-overlay.js
@@ -1,10 +1,50 @@
 'use strict';
 
-angular.module('angular-help-overlay', []).directive('helpOverlay', ['$window', function ($window) {
+angular.module('angularHelpOverlay', []).directive('helpOverlay', ['$document', function ($document) {
   return {
     restrict: 'A',
-    link: function(scope, element, attributes) {
-      element.chardinJs();
+    scope: {
+      helpOverlay: '=',
+      helpStart: '&',
+      helpStop: '&'
+    },
+    link: function (scope, element, attrs) {
+
+      $document.on('chardinJs:start', function (event) {
+        if (angular.isFunction(scope.helpStart)) {
+          scope.helpStart(event);
+        }
+
+        console.log('START');
+        if (scope.helpOverlay === false) {
+          scope.$apply(function () {
+            scope.helpOverlay = true;
+          });
+        }
+      });
+
+      $document.on('chardinJs:stop', function (event) {
+        if (angular.isFunction(scope.helpStop)) {
+          scope.helpStop(event);
+        }
+
+        console.log('STOP');
+        if (scope.helpOverlay === true) {
+          scope.$apply(function () {
+            scope.helpOverlay = false;
+          });
+        }
+      });
+
+      scope.$watch('helpOverlay', function (newValue, oldValue) {
+        if (newValue !== oldValue) {
+          if (newValue === true) {
+            element.chardinJs('start');
+          } else if (newValue === false) {
+            element.chardinJs('stop');
+          }
+        }
+      });
     }
   };
 }]);
\ No newline at end of file
