AngularJS: Header tag breaks ngSwitch

When I use

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 tag with a 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>