title: Watching a CSS property change from Bootstrap in AngularJS
body: <p>I am working on a responsive website. My site uses Bootstrap 3.1 and AngularJS. Bootstrap has a class called "visible-xs". This class basically says let something be visible on small screens and hidden on larger screens. It does this by changing the CSS <code>display</code> property value between <code>none</code> and <code>block</code>. Currently, I have a div that looks like the following:</p>
  
  <pre><code>&lt;span id="smallContent" class="visible-xs"&gt;Mobile Content&lt;/span&gt;
  </code></pre>
  
  <p>I need to do some stuff programmatically in my controller when <code>smallContent</code> changes from visible to hidden and vice-versa. My question is, how do I watch for changes on the <code>display</code> property of <code>smallContent</code>? I've noticed the $watch method on the scope (<a href="http://docs.angularjs.org/api/ng/type/" rel="nofollow">http://docs.angularjs.org/api/ng/type/</a>$rootScope.Scope). However, this seems to watch for changes to a property in the scope, not for changes to a property in the DOM.</p>
  
  <p>Is there a way to do what I'm trying? If so, how?</p>
  
  <p>Thank you!</p>