Ng-show hides all content on the page

Question

Here is my scenario:

I am creating a side menu with AngularJS. When the user selects the hamburger icon , he should move the menu to the right. When the user selects the delete button , the menu should slide to the left (on the screen).

Current scenario:

The menu opens and closes as expected. However, the rest of the content on the page disappears when you open the menu. I spent time searching the Internet, but I can’t isolate the problem. Any tips or suggestions?

Here is my repository:

https://bitbucket.org/ChaseHardin/teaplanner/

The code:

controller

"use strict";

teaApp.controller("menuController", function($scope) {
    $scope.toggled = false;

    $scope.toggle = function() {
        $scope.toggled = !$scope.toggled;
    }
});

View

 <div ng-controller="menuController">
        <h3 class="glyphicon glyphicon-menu-hamburger" id="menu-align-hamburger" ng-click="toggle()" ng-show="!toggled"></h3>
        <div class="menu-box" ng-show="toggled">
            <h3 class="glyphicon glyphicon-remove" id="menu-align-remove" ng-click="toggle()"></h3>
        </div>
        <div>
            <h1 class="text-center">Hello StackOverflow!!</h1>
        </div>
    </div>

CSS

.menu-box {
    background-color: #403b41;
    width: 20%;
    height: 100vh;
}

#menu-align-hamburger {
    padding-left: 15px;
    cursor: pointer
}

#menu-align-remove {
    padding-left: 15px;
    cursor: pointer;
    color: dimgrey;
}

Answer 1

, , , "Hello" .

, , display:inline-block , "", , .

P.S., , , . , .