title: How to correctly wrap a one time jquery call inside an AngularJS directive?
body: <p>I have a simple directive which transforms</p>
  
  <pre><code>&lt;a caracteristic="caracteristics.strength"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>into a more elaborated tag with correct values : </p>
  
  <p>template.html</p>
  
  <pre><code>&lt;a ng-href="regles#{{ caracteristic.name | lowercase }}" class="ui mini {{ caracteristic.color }} label" data-title="{{ caracteristic.name }}" data-content="{{ caracteristic.description }}"&gt;{{ caracteristic.name | uppercase}}&lt;/a&gt;
  </code></pre>
  
  <p>Here is the directive :</p>
  
  <pre><code>'use strict';
  
  angular.module('myApp')
      .directive('caracteristic', function() {
          return {
              templateUrl: 'components/caracteristic/caracteristic.html',
              restrict: 'EA',
              scope: {
                  caracteristic: '='
              },
              replace: true,
              link: function() {
                  $('.mini.label').popup({
                      transition : 'fade up',
                      variation : "large"
                  });
              }
          };
      });
  </code></pre>
  
  <p>So basically my model won't change and if i render two a tag with my directive the $(...).popup will be called twice. </p>
  
  <p>How can I make it load only once ?</p>
  
  <p>PS : i'm totally new in angularJS, too novice to convert this jQuery plugin into native Angular for now. If i'm totally wrong, enlight me ! ;)</p>