I had a use case whereby I have to keep an HTML element hidden by default using CSS as follows:

HTML:

<div class=item>

</div>

CSS:

.item {

    display: none;

}

But, I need to toggle the element's visibility using ng-show after the page has loaded as follows:

<div class=item ng-show=show_element>

</div>

But, even if $scope.show_element 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?

Also, you may think I can keep $scope.show_element 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.