Angular switch Outer Div based on boolean

Question

I am using Angular 1.4.7 and need to do the following

<div ng-if="varIsTrue">
<div ng-if="!(varIsTrue)" my-custom-directive>
  A lot of content
</div>

So basically, if the div is set only the proper div shows up. I tried do a few variations of this with ng-if and ng-show but I believe because how the browser renders the dom it is messing it up with the multiple divs, but that is the concept I am going for. Does anyone know how I can accomplish this?

Answer 1

You cannot do this you should have 2 closing tags

<div ng-if="varIsTrue">
</div>
<div ng-if="!(varIsTrue)" my-custom-directive>
  A lot of content
</div>

or you will have to switch in my-custom-directive