I've been troubleshooting for hours to figure out why the Angular elements in one div suddenly stopped working. After some investigation, I realized that a sibling div with an ng-if="someVar" was causing the issue. Currently, when someVar is true, the div displays and functions properly with ng-mouseovers, ng-clicks, and live updating scope variables like {{variables}}.
However, having this ng-if seems to completely disable the functions of its sibling. The {{otherVars}} remain static and all ng-mouseovers and ng-clicks stop responding altogether. Why is this happening?
Here is a condensed version of my code:
<div class="first-div" ng-if="!showFAQ">
<p class="title">
<span ng-mouseover="message = messages.default; defaultHover = true" ng-mouseleave="defaultHover = false">{{defaultHover}}</span>
</p>
<span class="enter-button-inner" ng-mouseover="defaultHover = true; message = messages.enterButton" ng-mouseleave="defaultHover = false" ng-click="enterApp()">
Click here to start
</span>
</div>
<div class=" second-div show-message-{{defaultHover}}">
{{message}}
</div>
All directives and functions in the first-div work perfectly fine, but those in the second-div just don't seem to function at all.
What could be causing this issue?