title: Angular Bootstrap Tooltip Dynamic Content
body: <p>I am making a cart application in Angular using <a href="https://angular-ui.github.io/bootstrap/" rel="nofollow noreferrer">Angular Bootstrap</a>.</p>
  
  <p>When hovering over the cart icon a tooltip should appear. The tooltip's content should change based on if the item is already in the cart or not.</p>
  
  <p>So, here is the html:</p>
  
  <p><code>&lt;h3&gt;&lt;i class="fa fa-shopping-basket" ng-click="add2Cart(item.Name)" tooltip-placement="right" uib-tooltip-html="itemtooltiptext(item.Name)" aria-hidden="true"&gt;&lt;/i&gt;&lt;/h3&gt;</code></p>
  
  <p>Basically, in order to check if the item is already in the cart, I want the tooltip text to resolve from a function. My understanding from the documentation is this is supported as long as the HTML is trusted.</p>
  
  <p>It says,</p>
  
  <blockquote>
    <p><code>uib-tooltip-html</code> $ - Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the uib-tooltip-template attribute option instead. The user is responsible for ensuring the content is safe to put into the DOM!</p>
  </blockquote>
  
  <p>So my <code>itemtooltiptext()</code> function is...</p>
  
  <pre><code>  $scope.itemtooltiptext = function(name) {
    if (localStorage.getItem("cart") === null) {
      return $sce.trustAsHtml("Add " + name + " to Cart!");
    } else {
      var cart = JSON.parse(localStorage.getItem("cart"));
      for (var i = 0; i &lt; cart.length; i++) {
        if (cart[i] == name) {
          console.log("already in cart");
          return $sce.trustAsHtml(name + "already in Cart!");
        }
      }
      return $sce.trustAsHtml("Add " + name + " to Cart!");
    }
  }   
  </code></pre>
  
  <p>This results in an </p>
  
  <blockquote>
    <p>Infinite $digest Loop Error</p>
  </blockquote>
  
  <p>As detailed here: <a href="https://stackoverflow.com/a/19370032">https://stackoverflow.com/a/19370032</a></p>
  
  <p>But the problem is I need it to come from a function with the various conditions? So should I be using a template? I don't understand how that would work any better because I still need dynamic text served from the template... so what is the solution?</p>
  
  <p>Thank you.</p>