title: Scope variable is not working in html template in angularjs
body: <p>I am trying to pass the <code>variation variable</code> from <code>card.html</code> to <code>tooltip.html</code> in angulajs. However, for whatever reasons, it doesn't work. When I <code>console.log(scope.variation)</code> inside <code>interestRateTooltip.directive.js</code>, it is showing me <code>apr</code>. </p>
  
  <p>Also, in <code>tooltip.html</code>, if I have the following</p>
  
  <pre><code>&lt;div&gt;
    {{ variation }}
  &lt;/div&gt;
  </code></pre>
  
  <p>it is displaying <code>apr</code> inside a div. So I don't understand why <code>&lt;i tooltip position="{{ variation === 'apr' ? 'left' : 'right'}}"&gt;</code> would always be false and becomes <code>right</code>. </p>
  
  <p>I have spent 6 hours searching since this morning. Can someone please help? Thanks!</p>
  
  <p>In <code>card.html</code></p>
  
  <pre><code>&lt;div&gt;
    &lt;interest-rate-tooltip variation="apr"&gt;&lt;/interest-rate-tooltip&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In <code>interestRateTooltip.directive.js</code></p>
  
  <pre><code>angular.module("borrower.offers").directive('interestRateTooltip',  function () {
    return {
      restrict: "E",
      templateUrl: ".../card.html",
      link: function(scope, element, attrs) {
        if (attrs.variation === 'apr') {
          scope.variation = 'apr';
        }
      }
    }
  });
  </code></pre>
  
  <p>In <code>tooltip.html</code></p>
  
  <pre><code>&lt;div&gt;
    &lt;i tooltip position="{{ variation === 'apr' ? 'left' : 'right'}}"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In <code>tooltip.directive.js</code></p>
  
  <pre><code>angular.module("borrower.offers")
    .directive("tooltip", function() {
      return {
        restrict: "A",
        link: function(scope, element, attrs) {
  
          var params = {};
  
          switch (attrs.position) {
            case 'left':
              params = { position: 'bottom left' }
              break;
            case 'right':
              params = { position: 'bottom right' }
              break;
            case 'center':
              params = { position: 'bottom center' }
              break;
          }
        }
      }
    });
  </code></pre>