I had a long form across multiple tabs. Some parts of the form were hidden via ng-if. After some time I’ve noticed that ng-if on <form> element does not work anymore. The parts which were to be hidden, were always visible. When I’ve changed element type to <div> or <div ng-form> it worked again. WTF is happening here??
The problem was that about a week before I’ve added <form> above all those tabs and thus the <form> inside of tabs were nested. Angular has no problem with that, but browsers do. It is invalid HTML. As a result ng-if (or ng-show, ng-hide) was not even called, it was silently ignored.
So the solution is simple. If you need nested forms, always use directive ng-form instead of <form> element. Than you will have valid html and directives will be invoked.
RTFM 🙂