title: Using a angular directive on the template of another directive?
body: <p>I am trying to apply a angular directive to an element I create in a template of another directive but it doesn't works if I add it as an attribute in the template. I have the following two directives:</p>
  
  <pre><code>// Event Audios
  app.directive('audios', ['$sce', function($sce) {
    return {
      restrict: 'A',
      scope: { srce:'=' },
      replace: true,
      template: '&lt;audio ng-src="{{file}}" controls&gt;&lt;/audio&gt;',
      link: function (scope, element) {
        var eventID  = document.getElementById('audios').getAttribute('data-event');
  
        scope.$watch('srce', function (newVal, oldVal) {
           if (newVal !== undefined) {
               scope.file = $sce.trustAsResourceUrl("data/events/" + eventID +
               "/recursos/audio/" + newVal);
           }
        });
      }
    };
  }]);
  
  
  // Media Element
  app.directive('mediaelem', function() {
    return {
      restrict: 'A',
      link: function(scope, element) {
       $(element).mediaelementplayer();
      }
    };
  });
  </code></pre>
  
  <p>The audios directive is used on an ng-repeat to display all the audio files of any particular event. But I also want to apply the mediaelementplayer plugin to all the generated audio tags. Is there a way to combine both directives to accomplish this?</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>EDIT:</strong> Plunkr: <a href="http://plnkr.co/edit/i3IV1W5q6MChuzEsjuZf?p=preview" rel="nofollow">http://plnkr.co/edit/i3IV1W5q6MChuzEsjuZf?p=preview</a></p>
  
  <p>Added a Plunkr so that you can better see what I am trying to do. I put a audio tag under test as a stand alone example so that you can see the medialement plugin works in that case.</p>