Angular - MotherEffing Blink Tag!!!

and new promise cancel functionality...

HTML

<div ng-app="blink">
    Whoa, look...<blink data-speed="500" ng-click="stop()">&lt;blink&gt;I am back!&lt;/blink&gt;</blink><br/>
    it's some blinky shit:
        <blink data-speed="3000" ng-click="stop()">and me...</blink> neat...
</div>

CSS

span{
    background-color:yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>

JavaScript

var blink = angular.module('blink', [])
    .directive('blink', function($timeout) {
    return {
        restrict: 'E',
        transclude: true,
        scope: { 
        },
        controller: function($scope, $element,$attrs) {
            $scope.speed = $attrs.speed;
            $scope.promise;
            $scope.blinking = true;
            function showElement() {
                $element.css("visibility", "visible"); 
               $scope.promise = $timeout(hideElement,$scope.speed);
            }
            function hideElement() {
                $element.css("visibility", "hidden");
                $scope.promise =  $timeout(showElement,$scope.speed);
                
            }
            $scope.stop = function(){
                $timeout.cancel($scope.promise);
                if($scope.blinking){
                    console.log("stopping the madness...");
                    $element.css("visibility", "visible"); 
                }else{
                    console.log("starting the madness...");
                    showElement();
                }
                $scope.blinking = !$scope.blinking;
                }
            showElement();
        },
        template: '<span ng-transclude></span>',
        replace: true
    };
});