Sidebar transition using AngularJS using scope.apply not working - css

Question

I have 2 sections of a page
1. Sidebar menu
2. Page content
When I click a button on the page content the slide bar menu should slide out. I am trying to achieve this using ngClass of Angular JS.
Here is my CSS first:
*,
*:after,
*::before {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,body,
.st-container,
.st-pusher,
.st-content {
height:100%;
}
.st-content {
overflow-y:scroll;
}
.st-content,
.st-content-inner {
position:relative;
}
.st-container {
position: relative;
overflow: hidden;
}
.st-pusher {
position: relative;
left: 0;
z-index: 99;
height: 100%;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.st-pusher {
padding-left: 250px;
}
.st-pusher::after {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
background: rgba(0,0,0,0.2);
content: '';
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
.st-menu-open .st-pusher::after {
width: 100%;
height: 100%;
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.st-menu {
position: absolute;
top: 0;
left: 0;
z-index: 100;
visibility: visible;
width: 250px;
height: 100%;
background: #333300;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.st-pusher-expand {
padding-left: 100px;
}
.st-menu-collapse {
position: absolute;
top: 0;
left: 0;
z-index: 100;
visibility: visible;
width: 50px;
height: 100%;
background: #333300;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
Here is my index.html:
<div class="st-container"> <!-- The whole screen -->
<div class="st-pusher" ng-class="myVar">
<nav class="st-menu" ng-class="myVar1"></nav> <!-- The navigation menu -->
<div class="st-content">
<div class="st-content-inner">
<div class="container" ng-view="">
</div>
</div>
</div>
</div>
</div>
Here is the controller code:
$scope.boolChangeClass = false;
$scope.click = function() {
if (!$scope.boolChangeClass) {
$scope.myVar = "st-pusher-expand";
$scope.myVar1 = "st-menu-collapse";
} else {
$scope.myVar = "st-pusher";
$scope.myVar1 = "st-menu";
}
$scope.boolChangeClass = !$scope.boolChangeClass;
setTimeout(function() {
$scope.$apply();
});
};
But the code is not working. I took a look at this example and it works if I try it out. But what I need is the right side content to resize to the full size of the container when the sidebar disappears.
Different transitions with AngularJS