使用Scope.apply使用AngularJS的边栏转换不起作用

Question

我有一个页面的2个部分  1.边栏菜单  2.页面内容

当我点击页面内容上的按钮时，幻灯片栏菜单应该滑出。我正在尝试使用Angular JS的ngClass来实现这一点。

首先是我的CSS：

*,
*: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;
}

这是我的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>

这是控制器代码：

$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();
        });
    };

但代码无效。我看了一下这个例子，如果我试一试它就可以了。但我需要的是当侧边栏消失时右侧内容调整到容器的完整大小。

Different transitions with AngularJS