ng-switch-when-separator not working in angularJS
<p><code>ng-switch</code> is not working when i use <strong><code>ng-switch-when-separator</code></strong> .
when I select <strong>settings</strong> the switch is pointing to default div</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module("myModule", [])
 .controller("myController", function ($scope) {
    $scope.items = ['settings', 'home', 'options', 'other'];
    $scope.opt = $scope.items[0];
  });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;body ng-app="myModule"&gt;
    &lt;div ng-controller="myController"&gt;
        &lt;select ng-model="opt" ng-options="item for item in items"&gt;
        &lt;/select&gt;
        &lt;code&gt;selection={{opt}}&lt;/code&gt;
        &lt;hr /&gt;
        &lt;div class="animate-switch-container"
            ng-switch on="opt"&gt;
            &lt;div class="animate-switch" ng-switch-when="settings|options" ng-switch-when-separator="|"&gt;Settings Div&lt;/div&gt;
            &lt;div class="animate-switch" ng-switch-when="home"&gt;Home Span&lt;/div&gt;
            &lt;div class="animate-switch" ng-switch-default&gt;default&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>