Sidebar transition using AngularJS using scope.apply not working

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