Jade, Angular and ngSwitch

I have an issue using ng-switch for some reason the view won't switch even if the model is updated. It always display the default view (which is there for testing only), everything is supposed to work OK in full html as tested here http://plnkr.co/edit/fKlPKy?p=preview so I suppose it's from jade:

    .btn-group(data-toggle='buttons-radio', style='float:right; margin-right:20px;')
      .btn(ng-model='displayType', btn-radio="'grid'")
        i.icon-th
      .btn(ng-model='displayType', btn-radio="'list'")
        i.icon-align-justify

  .switch(ng-switch, on='displayType')
    .switch(ng-switch-when='grid')
      include gridView
    .switch(ng-switch-when='list')
      include listView
    pre(ng-switch-default) {{displayType}}

I can see in the default view that the displayType is correctly updated to 'grid' or 'list' depending on the selected radio

Updated with full HTML of the area:

<div ng-controller="cardCtrl" class="container ng-scope">
  <div class="card-list-header">
    <div class="card-search">
      <div align="center" class="input-append">
        <input type="text" ng-model="searchterm" placeholder="Type in filter criteria and press Enter..." ui-keypress="{13:'keypressCallback($event)'}" class="input-xxlarge ng-valid ng-dirty"><span ng-click="addCard()" class="add-on">+</span>
      </div>
    </div>
    <div data-toggle="buttons-radio" style="float:right; margin-right:20px;" class="btn-group">
      <div ng-model="displayType" btn-radio="'grid'" class="btn ng-pristine ng-valid active"><i class="icon-th"></i></div>
      <div ng-model="displayType" btn-radio="'list'" class="btn ng-pristine ng-valid"><i class="icon-align-justify"></i></div>
    </div>
  </div>
  <div ng-switch="ng-switch" on="displayType" class="switch">
    <!-- ngSwitchWhen: grid -->
    <!-- ngSwitchWhen: list -->
    <!-- ngSwitchDefault: ng-switch-default -->
    <pre ng-switch-default="ng-switch-default" class="ng-scope ng-binding">grid</pre>
  </div>
</div>

As discussed in the comments above, ng-switch="ng-switch" was messing up ng-switch directive processing. ng-switch="displayType" works, so this Jade syntax should work:

.switch(ng-switch='displayType')

I was having the same issue - my first fix was simply to enclose the "ng-switch on" in quotes in the .jade so that it is treated as a single attribute - otherwise it was translating to two separate html attributes. To produce

<div ng-switch on="displayType" class="switch">

You would use

.switch("ng-switch on"="displayType")

but since the on is optional anyway (one could argue the sample in the docs is misleading to include it), the better way would be to omit the problematic "on" entirely (like the previous answer) like so:

.switch(ng-switch="displayType")

You can debug this sort of thing with an online jade to html tool