Why refreshing page when I using data-ng-if Angular directive?

Question

I need to show below div when my screen is bigger than 1700 pixels, but I have a non standard problem: when isMonitorIsBig === false, my DOM is not refreshing, but I have all the page refreshing and after that this block is showing correctly.

<div class="some classes" data-ng-if="!isMonitorIsBig">... .. . ... </div>

The need of refreshing the whole single page application after I changed the window width it's not very comfortable, how can I fix this?

Answer 1

You probably want to use CSS for this, with media-queries:

@media only screen and (min-width: 1700px) {
    .lg-hide {
        display: none;
    }
}

HTML:

<div class="lg-hide">This div hides on a screen with a width > 1700px</div>