Cannot set property ‘show’ of undefined at new DeathrayMenuController – AngularJS

Hey everyone,

I’ve just started working my way through AngularJS by Brad Green & Shyam Seshadri. Unfortunately I ran into a bit of an issue on page 23 (line 19):

TypeError: Cannot set property 'show' of undefined
    at new DeathrayMenuController (http://127.0.0.1/:18:27)
    at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:28:174)
    at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:28:304)
    at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:52:239)
    at $get.g (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:348)
    at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:6:494)
    at i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:213)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:307)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324) 

The solution to this problem turned out to be pretty straight forward, just set the menu state in a similar fashion to that used in the previous exercises:

	
		Your Shopping Cart
	
	
		
		

			Toggle Menu
			

				
Stun
				
Disintergrate
				
Erase
			
		
		//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js
		
			function DeathrayMenuController($scope){
				/*$scope.menuState.show = false; //Switch this line with the one below
				$scope.menuState = {show: false}; 

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

				$scope.erase = function(){
					window.alert('erased');
				}

				$scope.disintergrate = function(){
					window.alert('Disintergrated');
				}

				$scope.stun = function(){
					window.alert('Stunned');
				}
			}
		
		<!--http://controllers.js-->