title: angularjs service can't access property
body: <p>I have a class set up like this:</p>
  
  <pre><code>.factory('DesignerService', function () {
      var kit = {
          clubName: 'Moss side archery club',
          teamName: 'The flying arrows',
  
          selectedColours: ['082140', '841c3d'],
          selectedGarments: ['hoody'],
          selectedDesign: "Angelus",
  
          total: '00.00',
          templates: []
      };
  
      var getTemplates = function () {
          var templates = [];
  
          console.log(kit);
  
          for (var i = 0; i &lt; kit.selectedGarments.length; i++) {
              var garment = kit.selectedGarments[i];
  
              kit.templates.push('/assets/garments/' + garment + '.svg');
          }
  
          return kit;
      };
  
      var getColours = function () {
          return ['000000', 'FFFFFF', '00adef', 'ed008c', 'fef200', '2e3192', '00a652', 'ed1b24', 'c7c8ca', 'f14e23', '6c9d30', 'c0d731', 'f5a3c7', '816ab0', '082140', '1e4f2f', '5bcaf5', 'f04e3f', 'f68b1f', 'cdbe01', 'ee4d9b', '007193', '5f1e08', '841c3d'];
      };
  
      var getGarments = function () {
          return ['Shirt', 'Track top', 'Skirt', 'Hoody', 'Socks', 'Shorts', 'Track pants', 'Polo shirt', 'Beanie hat', 'T - shirt'];
      };
  
      var getDesigns = function () {
          return ['Angelus', 'Claudius', 'Equitius', 'Octavius', 'Valerius']
      }
  
      var addToArray = function (array, item) {
          array.push(item);
      };
  
      var removeFromArray = function (array, item) {
          var index = array.indexOf(item);
  
          if (index &gt; -1) {
              array.splice(index, 1);
          }
      };
  
      var modifyArray = function (array, value) {
          var i = array.indexOf(value);
  
          if (i &gt; -1) {
              removeFromArray(array, value);
          } else {
              addToArray(array, value);
          }
      }
  
      var setColour = function (colour) {
          return modifyArray(kit.selectedColours, colour);
  
          return kit;
      };
  
      var setGarment = function (garment) {
          console.log(kit);
  
          modifyArray(kit.selectedGarments, garment);
  
          var kit = getTemplates();
  
          console.log(kit);
  
          return kit;
      };
  
      var setDesign = function (design) {
          kit.selectedDesign = design;
  
          return kit;
      };
  
      return {
          kit: kit,
  
          getTemplates: getTemplates,
          getColours: getColours,
          getGarments: getGarments,
          getDesigns: getDesigns,
  
          setColour: setColour,
          setGarment: setGarment,
          setDesign: setDesign
      };
  })
  </code></pre>
  
  <p>If I call the function <strong>setGarment</strong> the first console.log(kit) returns undefined so <strong>modifyArray</strong> errors at the <strong>kit.selectedGarments</strong>.
  But if I comment out the line:</p>
  
  <blockquote>
    <blockquote>
      <p>//modifyArray(kit.selectedGarments, garment);</p>
    </blockquote>
  </blockquote>
  
  <p>Then <strong>getTemplates</strong> actually logs the kit object and returns the updated object.</p>
  
  <p>Can someone explain why?</p>
  
  <p><strong>Update 1</strong></p>
  
  <p>Ok, now I understand this hoisted stuff, I have redesigned my service to look like this:</p>
  
  <pre><code>.factory('DesignerService', function () {
      var self = this;
  
      var addToArray = function (array, item) {
          array.push(item);
      };
  
      var removeFromArray = function (array, item) {
          var index = array.indexOf(item);
  
          if (index &gt; -1) {
              array.splice(index, 1);
          }
      };
  
      var modifyArray = function (array, value) {
          var i = array.indexOf(value);
  
          if (i &gt; -1) {
              removeFromArray(array, value);
          } else {
              addToArray(array, value);
          }
      }
  
      self.kit = {
          clubName: 'Moss side archery club',
          teamName: 'The flying arrows',
  
          selectedColours: ['082140', '841c3d'],
          selectedGarments: ['hoody'],
          selectedDesign: "Angelus",
  
          total: '00.00',
          templates: []
      };
  
      self.getTemplates = function () {
          var templates = [];
  
          for (var i = 0; i &lt; self.kit.selectedGarments.length; i++) {
              var garment = self.kit.selectedGarments[i];
  
              self.kit.templates.push('/assets/garments/' + garment + '.svg');
          }
  
          return self.kit;
      };
  
      self.getColours = function () {
          return ['000000', 'FFFFFF', '00adef', 'ed008c', 'fef200', '2e3192', '00a652', 'ed1b24', 'c7c8ca', 'f14e23', '6c9d30', 'c0d731', 'f5a3c7', '816ab0', '082140', '1e4f2f', '5bcaf5', 'f04e3f', 'f68b1f', 'cdbe01', 'ee4d9b', '007193', '5f1e08', '841c3d'];
      };
  
      self.getGarments = function () {
          return ['Shirt', 'Track top', 'Skirt', 'Hoody', 'Socks', 'Shorts', 'Track pants', 'Polo shirt', 'Beanie hat', 'T - shirt'];
      };
  
      self.getDesigns = function () {
          return ['Angelus', 'Claudius', 'Equitius', 'Octavius', 'Valerius']
      }
  
      self.setColour = function (colour) {
          return modifyArray(self.kit.selectedColours, colour);
  
          return self.kit;
      };
  
      self.setGarment = function (garment) {
          modifyArray(self.kit.selectedGarments, garment);
  
          self.getTemplates();
  
          return self.kit;
      };
  
      self.setDesign = function (design) {
          self.kit.selectedDesign = design;
  
          return self.kit;
      };
  
      return self;
  })
  </code></pre>
  
  <p>Would this be the correct way to go about it?</p>