When I use
<h3>
<h3>
<strong>
<div ng-controller="MyCtrl">
<p data-ng-if="::type" data-ng-switch="type">
<span><h3>Account type:</h3></span>
<span data-ng-switch-when="facebook" class="ico-fb inline"></span>
<span data-ng-switch-when="google" class="ico-google inline"></span>
<span data-ng-switch-default="" class="ico-email inline"></span>
<span>{{ type }}</span>
</p>
</div>
<div ng-controller="MyCtrl">
<p data-ng-if="::type" data-ng-switch="type">
<span><strong>Account type:</strong></span>
<span data-ng-switch-when="facebook" class="ico-fb inline"></span>
<span data-ng-switch-when="google" class="ico-google inline"></span>
<span data-ng-switch-default="" class="ico-email inline"></span>
<span>{{ type }}</span>
</p>
</div>
It is because the h3
, or div
inside a p
is invalid in any HTML standard. In this case, if you use inspect elements
in the browser, you will find the h3
closes p
automatically, which makes ngSwitch breaks.
More details here: http://stackoverflow.com/a/4291608/1867608