title: AngularJS - same timer for all directive instances
body: <p>What is a best "Angular Way" to implement the directive that will have a shared timer for all it instances?</p>
  
  <p>For example I have a directive "myComponent" and on the page it appears many times.
  Inside of the component, exists some text that blink with some interval.</p>
  
  <p>Because of business requirements and performance considerations, I would like that there will be single "timeout" that will toggle the blink for all instances at once (after document is ready).</p>
  
  <p>I thought about the writing some code within directive definition:</p>
  
  <pre><code>//Pseudo code
  angular.module("app",[]).directive("myComponent", function($timeout){
     $(function() { $timeout(function(){ $(".blink").toggle(); }, 3000); } );
     return {
        //Directive definition
     };
  });
  </code></pre>
  
  <p>Or by using some kind of service that will receive the <code>$element</code> and add remove class to it:</p>
  
  <pre><code>//Pseudo code
  angular.module("app",[])
  .service("myService", function($timeout){
       var elements = [];
  
       this.addForBlink = function(element) { elements.push(element) };
  
       $(function() { $timeout(function(){ $(elements).toggle(); }, 3000); } );
  })
  .directive("myComponent", function(myService){
  
     return {
        compile:function($element){
          myService.addForBlink($element);
          return function() { 
             //link function
          }
        }
     };
  });
  </code></pre>