ng-if doesn't remove sub elements?

Question

According to the docs :

If the expression is falsy then the element is removed from the DOM tree. If it is truthy a copy of the compiled element is added to the DOM tree.

(I'm using ver 1.4.8)

But looking at this plunker :

I have this markup :

 <p ng-if="null">
        <p ng-include="'1.html'">***</p>
 </p>

Where 1.html is :

1.html
<div ng-controller="ctrl1">
  {{a}}
</div>

Where controller is :

var app = angular.module("myApp",[]);
app.controller('ctrl1',function ($scope){$scope.a=1});

But the output is :

1.html
1

Question

I did ng-if="null" and null is a falsy value. Why does it still display the inner content?

ps - If I put a regular tag :

  <p ng-if="null">
        <b>Hello</b>
  </p>

It doesn't display it.

Answer 1

You have invalid html, means you can not have nested p tag, the inner p tag is thrown out.

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

Below HTML

<p ng-if="null">
    <p ng-include="'1.html'">***</p>
</p>

Rendered As

<p ng-if="null"></p>
<p ng-include="'1.html'">***</p>

Detailed Answer