title: How to pass data from directive to html template - AngularJS
body: <p>In my directive:</p>
  
  <pre><code>angular.module('myPopUp',[])
  .directive('myPopUp',['$document', function($document){
  
      return{
          restrict: 'EA',
          controller: function($scope){
          },
          scope: {
  
          },
          templateUrl: 'popup.html',
          link: function(scope, elm, attr){
          var topPosition = top + (btnHeight/2) - (popOverHeight/2);
  
          }
  </code></pre>
  
  <p>After doing the calculation in link, how can I pass 'topPosition' to my popup.html template? Any ideas?</p>
  
  <p>I try to do in this way, but it doesn't work.</p>
  
  <p>popup.html:</p>
  
  <pre><code>&lt;div class="popover right" style="width:auto;top:{{topPosition}}px;"&gt;
        &lt;div class="arrow"&gt;&lt;/div&gt;
        &lt;div&gt;.......&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>