Ng-switch not working - angularjs

Question

I am using ng-switch as follows. Is this the proper usage of ng-switch? I don't want it to be in an array, because I am using it with a scope variable.
In my HTML I have defined it like below. The userRole being the variable I want my search to be based on, and in the when I have used values based on what my div tag contents should work with.
<div ng-switch on ="userRole">
<div ng-switch-when="admin">
[...]
</div>
<div ng-switch-when="user">
[...]
</div>
I am not able to access the functionality of ng-switch, and my entire content part just vanishes.
In my .js file I have defined the following:
if(loginModel.authorities[0].authority=="ROLE_ADMIN"){
console.log("Me here");
$scope.userRole="admin";
}
else
if(loginModel.authorities[0].authority=="ROLE_USER"){
$scope.userRole="user";
}
else{
$scope.userRole="guest";
}
But my screen does not show anything, which makes me wonder how should I use ng-switch. I do not want to use ng-hide / ng-show.

Answer 1

Here is a neat fiddle which i found on how ng-switch works.... The way you are using ng-switch is perfectly valid. I am guessing your userRole holds no value which is making it fail, can you double check on this.
<div ng-controller="LoginCheckCtrl">
<div ng-switch on="loginData">
<div ng-switch-when="false" ng-include="'login'"></div>
<div ng-switch-when="true" ng-include="'logout'"></div>
</div>
</div>
<script type="text/ng-template" id="login">
<button ng-click="login()">Login</button>
</script>
<script type="text/ng-template" id="logout">
<button ng-click="logout()">Logout</button>
</script>
Controller code:
var app = angular.module('myApp', []);
function LoginCheckCtrl($scope) {
$scope.loginData = false
$scope.login = function() {
console.log($scope.loginData ? 'logged in' : 'not logged in');
$scope.loginData = true;
};
$scope.logout = function() {
console.log($scope.loginData ? 'logged in' : 'not logged in');
$scope.loginData = false;
};
}
Fiddle
https://jsfiddle.net/mrajcok/jNxyE/