Unable to create toggle effect - Angularjs

Question

I'm following along in the tutorials with an AngularJS and am unable to create a toggle effect.

My console reads this error: TypeError: Cannot set property 'show' of undefined at new (http://practice.dev/app.js:41:25) which points to this line of code: $scope.menuState.show = false;

app.js

  app.controller('DeathrayMenuController',['$scope', function ($scope){
            $scope.menuState.show =  false;
            console.log($scope.menuState.show)

            $scope.toggleMenu=function(){
                $scope.menuState.show = !$scope.menuState.show;
            };

            $scope.stun=function(){
                console.log('stunned')
            };
            $scope.disintegrate=function(){
                console.log('disintegrated')
            };
            $scope.disintegrate=function(){
                console.log('Erased')
            };
        }]);

index.html

<div ng-controller='DeathrayMenuController'>
            <button ng-click='toggleMenu()'>Toggle Menu</button>
            <ul ng-show='menuState.show'>
                <li><button ng-click='stun()'>Stun</button></li>
                <li><button ng-click='disintegrate()'>Disintegrate</button></li>
                <li> <button ng-click='erase()'>Erase from history</li>
            </ul>
        </div>

Answer 1

As PSL noted, $scope.menuState is not defined.

Before you add properties to an object, you must create the object.

Change your second line to read:

$scope.menuState = { show: false };