title: AngularJS Calling Service from Controller Error
body: <p>I am not sure why I am getting this error, could someone please explain this to me?</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'getValueByName' of undefined
        at Object. (<a href="http://localhost:63342/Hardcore%20Gaming%20JS/scripts/MainApp.js:175:32" rel="nofollow noreferrer">http://localhost:63342/Hardcore%20Gaming%20JS/scripts/MainApp.js:175:32</a>)
        at Object.invoke (<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:4473:17" rel="nofollow noreferrer">https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:4473:17</a>)
        at extend.instance (<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:9093:34" rel="nofollow noreferrer">https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:9093:34</a>)
        at nodeLinkFn (<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:8205:36" rel="nofollow noreferrer">https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:8205:36</a>)
        at compositeLinkFn (<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:7637:13" rel="nofollow noreferrer">https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:7637:13</a>)
        at publicLinkFn (<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:7512:30" rel="nofollow noreferrer">https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:7512:30</a>)
        at link (<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:986:7" rel="nofollow noreferrer">https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:986:7</a>)
        at invokeLinkFn (<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:8746:9" rel="nofollow noreferrer">https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:8746:9</a>)
        at nodeLinkFn (<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:8246:11" rel="nofollow noreferrer">https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:8246:11</a>)
        at compositeLinkFn (<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:7637:13" rel="nofollow noreferrer">https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js:7637:13</a>)
    </p>
  </blockquote>
  
  <p>I have created a service in order to store, update, and return the values of a parts list. I am trying to update the partsList after they click on the different radio buttons.  </p>
  
  <p>Also if you know how to make these selections persist through different view changes that would be awesome to know about as well.  </p>
  
  <p>Thanks!!</p>
  
  <p>Here is my Service Code:</p>
  
  <pre><code>mainApp.service('MyService', function () {
      var partsList = [
          {name: "selected_computer_type", value: ''},
          {name: "selected_computer_size", value: ''},
          {name: "selected_computer_color", value: ''}
      ];
  
      //iterates through partslist, finds object that matches and sets the new value
      this.setValue = function (name, value) {
          for (var i = 0; i &lt; partsList.length; i++)
              if (partsList[i].name == name) partsList[i].value = value;
      };
  
      this.getValueByName = function (name) {
          for (var i = 0; i &lt; partsList.length; i++)
              if (partsList[i].name == name)
                  return partsList[i].value;
          return "";
      };
  });
  </code></pre>
  
  <p>Here is my Controller Code:</p>
  
  <pre><code>mainApp.controller('controller_Computer_Type', ['$scope', function ($scope, MyService) {
      //Computer Type Selected
      $scope.current = MyService.getValueByName("selected_computer_type");
  
      //Updates the partsList
      $scope.change = function () {
          var value = $scope.current.toString();
          MyService.setValue("selected_computer_type", value);
      };
  
      //List of options for computer type
      $scope.types = [
          //TODO: update url images to reflect personal gaming and business profiles
          {name: 'Personal', value: 'personal', url: 'images/intel 700/ABFS_1_201706141903610053.jpg'},
          {name: 'Gaming', value: 'gaming', url: 'images/amd 500/83-230-100-02.jpg'},
          {name: 'Business', value: 'business', url: 'images/intel 500/83-101-369-z01.jpg'}
      ];
  }]);
  </code></pre>
  
  <p>Here is my View Code:</p>
  
  <pre><code>&lt;div ng-controller="controller_Computer_Type"&gt;
  
      &lt;h2&gt;Type of Computer&lt;/h2&gt;
  
      &lt;!--Radio Button Options Using Images--&gt;
      &lt;div class="row"&gt;
          &lt;label class="col-sm-4" ng-repeat="option in types"&gt;
              &lt;input type="radio" name="radio_type" ng-model="$parent.current" ng-change="change()" value="{{option.value}}" hidden/&gt;
              &lt;img class="img-thumbnail" src="{{option.url}}" alt="{{option.value}}"&gt;
              &lt;img class="overlay" src="images/greenCheck.png"&gt;
          &lt;/label&gt;
      &lt;/div&gt;
  
      &lt;!--Debugging purposes--&gt;
      &lt;p&gt;Current RB - {{current}}&lt;/p&gt;
  
      &lt;p&gt;Current DD - {{selectedItem.name}}&lt;/p&gt;
  
      &lt;p&gt;Message - {{message}}&lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>