title: Adding a property to an Angular object
body: <p>I am running an Angular app that pulls its data from a Web API service. The API returns the objects as JSON and the Angular service (via $http.get() ) returns them to the controller as an array of objects. Pretty normal stuff.</p>
  
  <p>What I'd like to do is add a property to each of the returned objects called "Selected". This property is purely for GUI purposes (is the object selected or not in the UI) and doesn't need to be persisted in any way. I figured the easiest thing to do was loop through the returned array of objects and just add it. So my code looks like this:</p>
  
  <pre><code>function getData() {
      myService.getData()
          .then(function(data) {
              $scope.myData = data.results;
              // Add a "Selected" property to each object
              $.each($scope.myData, function(item) {
                  item.Selected = false;
              });
  }
  </code></pre>
  
  <p>When it gets to the line that says, "item.Selected = false" it throw an error message, saying "Cannot assign to read-only property Selected". </p>
  
  <p>It is unclear to me why "Selected" is read-only? I didn't know if maybe Angular does some funky object processing when it reads data? What am I doing wrong here? Or should I be approaching this a completely different way? </p>
  
  <p>Note (I'd like to avoid having to make Selected a part of the original object, as it's not representative of anything related to that object). </p>