title: AngularJS: ng-show vs display:none
body: <p>I had a use case whereby I have to keep an HTML element hidden by default using CSS as follows:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="item"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.item {
      display: none;
  }
  </code></pre>
  
  <p>But, I need to toggle the element's visibility using ng-show after the page has loaded as follows:</p>
  
  <pre><code>&lt;div class="item" ng-show="show_element"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But, even if <code>$scope.show_element</code> is set to true, the element doesn't become visible, that is, the css property is overriding AngularJS' ng-show. Is there any way to give ng-show more priority? </p>
  
  <p>Also, you may think I can keep <code>$scope.show_element</code> as false initially to hide it. But in that case, I get a very short glimpse of the element when the page is loading which is not good from the UX point of view.</p>