Dot Flasher Directive

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

app.controller('MainCtrl', function($scope) {
});

app.directive('charFlasher', function($interval) {
  return {
    restrict: 'E',
    scope: {
      displayText: '@',
      flashChar: '@',
      flashInterval: '@'
    },
    template: '{{ realContent }}{{ flashingChars }}',
    link: function(scope, element, attrs) {
      var splitMessage = attrs.displayText.split(attrs.flashChar);
      var realContent = splitMessage.shift();
      var numFlashingChars = splitMessage.length;
      scope.flashingChars = attrs.flashChar;
      scope.realContent = realContent;
      $interval(function() {
        if (scope.flashingChars.length >= numFlashingChars) {
          scope.flashingChars = '';
        } else {
          scope.flashingChars += attrs.flashChar;
        }
      }, attrs.flashInterval);
      element.on('$destroy', function() {
        $interval.cancel(intervalId);
      });
    }
  };
});

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>

<body ng-app="plunker" ng-controller="MainCtrl">
  <h1>
    <char-flasher display-text="Drop image here to display in chat..." flash-char="." flash-interval="200"></char-flasher>
    </h1>
  <pre>{{ attrs }}</pre>
</body>

</html>

/* CSS goes here */