title: Angular Watch on element show not working
body: <p>I'm using an agular <code>$watch</code> to trigger an alert when the element become visible.</p>
  
  <pre><code>var scrollElement = "#hiddenObj";
  $scope.$watch(function() { return $(scrollElement).is(':visible') }, function() {
       alert('hi);
  });
  </code></pre>
  
  <p>Problem is that the alert is shown on page load though on page load, the element is hidden by default, and is shown only on click of some link.</p>
  
  <p>Just to confirm my assumption, I put a break point just before this code, and in my console, I executed this code:</p>
  
  <pre><code>$(scrollElement).is(':visible')
  </code></pre>
  
  <p>and it return <code>false</code>. That confirmed the element is invisible on page load. I don't know why the alert is still displayed on page load. And when I click the link, and <code>scrollElement</code> actually becomes visible, nothing happens.</p>
  
  <p>Is there anything I'm missing here?</p>