title: Page render issue - (With AngularJS)
body: <p>I'm having a weird issue with page render while using AngularJS and Chrome.
  I'm creating a cart icon that only shows when there's at least one element in my cart. The code is:</p>
  
  <pre><code>&lt;a ng-style="{visibility:myCart.checkCartExistence()?'visible':'hidden'}" href="/cart"&gt;&lt;span ng-bind="myCart.getCartQty()"&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p><br><br>
  Here's the problem:</p>
  
  <p>Top image shows the page as soon as an article is added to the cart.<br>Bottom image shows the same page when you scroll down a bit.</p>
  
  <p>The <strong>cart icon</strong> and the quantity aren't displayed immediately and <strong>only show up when you scroll down the page</strong>. The weirdest thing is that <strong>if you scroll all the way up, the cart icon disappear again</strong>.
  The same happens with the title that is set dynamically, when you're at the top of the page it shows TITLE A, if you scroll down a bit it updates to TITLE B. If you scroll up it shows TITLE A again.</p>
  
  <p>Unfortunately I can't post any link to the page so I'm wondering if anyone knows what this is without actually seeing the page.</p>
  
  <p><strong>NOTE THAT:</strong></p>
  
  <ul>
  <li>This happens with Chrome.</li>
  <li>I tried with other browsers and <em>it looks like</em> they don't have this issue.</li>
  <li>I managed to make it work somehow, clearing the browser cache but it came up again soon after.</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/nDWyw.jpg" alt="enter image description here"></p>