AngularJS: Header tag breaks ngSwitch

Question

When I use

<h3>

tags inside the ngSwitch in my html, the entire thing breaks.

Error: [$compile:ctreq] Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!

If i replace the

<h3>

tag with a

<strong>

tag for example then it works.

You can try out the example here: http://jsfiddle.net/Lb8aatyz/1/

Html #1

<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>

Html #2

<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>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

AngularJS: Header tag breaks ngSwitch

Sign up