title: Angular JS Service Setting Variables correctly Javascript undefined
body: <p>So I've created an angular js module and tried linking a service and using this service to share variables throughout the app. Everything is working fine but when I try to set the submenu[1] to a object it says submenu[1] is undefined. Which is correct it hasnt been created yet. But I just want to set the submenu[1] equal to an object. Don't see why it would have to be created. Not sure why its saying Uncaught TypeError: Cannot Read property submenu of undefined. I console.log the menuArray[key] I'm on and it comes back undefined. But that doesnt make sense either.</p>
  
  <pre>
  
      setSubMenu : function(key, subKey, value){
                          console.log(sharedVariables.menuArray[key]);
                  sharedVariables.menuArray[key].subMenu[subKey] = value;
      }
  
  </pre>
  
  <p>Here is what I have:</p>
  
  <pre><code>    var myModule = angular.module('companiesApp', ['ngResource']).config(function($routeProvider) {
      $routeProvider
          .when ('/', {controller:ListCtrl, template: $('#companies-list').html()})
          .when ('/new', {controller:NewCtrl, template: $('#companies-edit').html()})
          .when('/newMenu/:companyID', {controller:EditMenuCtrl, template: $('#menu-edit').html()})
          .when ('/edit/:companyID', {controller:EditCtrl, template: $('#companies-edit').html()})
          .when ('/editMenu/:companyID', {controller:EditMenuCtrl, template: $('#menu-edit').html()})
          .when ('/settings/:companyID', {controller:SettingsCtrl, template: $('#companies-settings').html()})});
  
  
  myModule.service('sharedVariables', function(){
      var sharedVariables = { count : 0, originalCount : 0, menuArray : []};
      return{
          getOriginalCount : function(){
              return sharedVariables.originalCount;
          },
        setOriginalCount : function(value){
              sharedVariables.originalCount = value;
          },
          getCount : function(){
              return sharedVariables.count;
          },
          setCount : function(value){
              sharedVariables.count = value;
          },
          getMenu : function(){
              return sharedVariables.menuArray;
          },
          setMenu : function(key, value){
              sharedVariables.menuArray[key] = value;
          },
        setMenuName : function(key,value){
              sharedVariables.menuArray[key].name = value;
          },
          setMenuEndPos : function(key, posLeft, posTop){
              sharedVariables.menuArray[key].endPosLeft = posLeft;
              sharedVariables.menuArray[key].endPosTop = posTop;
          },
          setSubMenu : function(key, subKey, value){
              sharedVariables.menuArray[key].subMenu[subKey] = value;
          }
      };
  });
  
  function EditMenuCtrl($scope,$routeParams, $location, sharedVariables){
      var count = 0;
      $scope.companyID = $routeParams.companyID;
      $scope.menuArray = [];
      $.ajax({
          url : "companies.php",
          type : "post",
          data : {
              action : "getMenus",
              id : $routeParams.companyID
          },
          success : function(data,status){
            var responses = JSON.parse(data);
              $('#menu').empty();
              for(i in responses){
                  //if the Root Order LI has not been created, create it
                  if($('#li-' + responses[i].rootORDER).length == 0){
                      count++;
                      var html = '&lt;li id="li-' + responses[i].rootORDER + '" class="dropdown"&gt;' + '&lt;a id="link-' + responses[i].rootORDER;
                      html += '" role="button" class="dropdown-toggle" data-type="text" data-toggle="dropdown"&gt;' + responses[i].menuROOT;
                      html += '&lt;/a&gt;' + '&lt;ul id="ul-' + responses[i].rootORDER; 
                      html += '" class="dropdown-menu" role="menu" aria-labelledby="dLabel" &gt;&lt;li role="presentation"&gt;&lt;a href="javascript:void(0)" onclick="addLITOUL()" role="menuitem"&gt;&lt;i class="icon-plus-sign"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;';
                      $('#menu').append(html);
                      //Record the Start Position of the Element
                      var Start = $('#li-' + responses[i].rootORDER).position();
                      sharedVariables.setMenu(responses[i].rootOrder, {name : responses[i].menuROOT, startPosLeft : Start.left, startPosTop : Start.top, subMenu : []});
                      //Make the Title Editable
                      $('#link-' + responses[i].rootORDER).editable(function(value,settings){
                          var tempID = $(this).attr('id');
                          tempID = tempID.substring(5);
                          sharedVariables.setMenuName(tempID,value);
                          return(value);
                      });
                      //Make the DropDowns and make them draggable
                      $('.dropdown-toggle').dropdown();
                      $('.dropdown').draggable({
                          containment: "#container", 
                          scroll: false, 
                          snap: true,
                          stop: function(event, ui) {
                              var Stoppos = $(this).position();
                              $("#position").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
                              var tempID = $(this).attr("id");
                              tempID = tempID.substring(3); //remove li- to get the index into the array
                              sharedVariables.setMenuEndPos(tempID, Stoppos.left, Stoppos.top);
                          }
                      });
                  }//end of if
              }//end of (for i in responses)
              sharedVariables.setOriginalCount(count);
              sharedVariables.setCount(count);
              //Fill in the inner UL with it's links
              for(i in responses){
                  html = '&lt;li id="' + i + '-' + responses[i].menuTITLE+ '" role="presentation"&gt;&lt;a role="menuitem" href="javascript:void(0)"&gt;' + responses[i].menuTITLE + '&lt;/a&gt;';
                  html += '&lt;/li&gt;';
                  $('#ul-' + responses[i].rootORDER).append(html);
                  sharedVariables.setSubMenu(responses[i].rootORDER, responses[i].linkORDER, {name: responses[i].menuTITLE});
              }
          }
      });
      console.log(sharedVariables.getOriginalCount());
  }
  </code></pre>