title: How to pass a template from a conditional command and interchange the directive data in between
body: <p>In my <code>directive</code> I have 2 constrains:</p>
  
  <p>1) I need to pass the <code>template</code> from a conditional function</p>
  
  <p>2) I require to interchange the data between active `directive' to the clicked one directive</p>
  
  <p>Here there is my conditional function :</p>
  
  <pre><code>.directive('programName', function ($compile) {
      return {
          restrict: 'AE',
          replace: true,
          scope: {
              appName: '=',
              index: '@',
              percent: '='
          },
          link: function (scope, element, attr) {
              var getTemplate = function (index) {
                  return Number(index) ? '&lt;h2 class="que t{{index}}" ng-click=callMe()&gt;{{appName.name}} {{appName.company}}{{appName.percent}}&lt;/h2&gt;' : 'htmlTemp/activeHTML.html'; // how to pass html template here?
              }
              element.html(getTemplate(scope.index));
              $compile(element.contents())(scope);
          },
          controller: function ($scope) {
              $scope.callMe = function () {
                  $scope.percent = $scope.appName.percent;
              }
          }
      }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/k5830xyL/1/" rel="nofollow">Here is the demo</a></p>