title: Adding property to each object of an array independently with AngularJS angular.extend
body: <p>I have an existing array with an object and several properties created on a first step. It is created by the following function:</p>
  
  <pre><code>$scope.recordlist = extractRecordJSONFromLocalStorage();
  $scope.addRecord = function () {
      $scope.recordlist.push(
              {
                  date: $scope.dateJson, 
                  time: $scope.time, 
                  car: $scope.carList.code, 
                  driver: $scope.driverList.name,
                  from: $scope.locationList.place,
                  destination: $scope.locationList2.place, 
                  pax: $scope.paxList
              }
          );
  
      $scope.custom = $scope.custom === false ? true: false;
      $scope.carList = 0;
      $scope.driverList = 0;
      $scope.locationList = 0;
      $scope.locationList2 = 0;
      jsonToRecordLocalStorage($scope.recordlist);
  };
  </code></pre>
  
  <p>It results in the following array:</p>
  
  <pre><code>[{
    "date":"2014 10 16",
    "time":"20.22",
    "car":"396",
    "driver":"Seb",
    "from":"A",
    "destination":"B",
    "pax":"3"
  }]
  </code></pre>
  
  <p>What I'm trying to do is to add another property into the existing object on the next step with ng-click. I've tried with the following function but it doesn't seem to work.</p>
  
  <pre><code>$scope.insertRecord = function (recordlist) {
  
      var arrival = { 'arrival' : moment().format("HH.mm") }
      console.log(arrival)
      angular.extend($scope.recordlist, arrival)
  
  
      jsonToRecordLocalStorage($scope.recordlist);
  }
  </code></pre>
  
  <p>The end result I'm looking for is the following:</p>
  
  <pre><code>[{
    "date":"2014 10 16",
    "time":"20.22",
    "car":"396",
    "driver":"Seb",
    "from":"A",
    "destination":"B",
    "pax":"3",
    "arrival":"23.10"
  }]
  </code></pre>
  
  <p>Maybe another thing to take also into consideration is that in the app it exists the possibility of having many different objects being listed, some that have the <code>arrival</code> property already defined, but some that will have it later in time.</p>
  
  <p>Any pointers?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The 2 solutions I got worked but didn't accomplish what I am looking for, so probably I was unclear on what I am trying to do.</p>
  
  <p>I am saving a collection of objects into an array, each object has a property <code>arrival</code> that will be defined on a second step.</p>
  
  <p>So first I create an array of objects like this:</p>
  
  <pre><code>[
   {
    "date":"2014 10 16",
    "time":"20.42",
    "car":"396",
    "driver":"Seb",
    "from":"A",
    "destination":"B",
    "pax":"3",
   },
   {
    "date":"2014 10 16",
    "time":"20.12",
    "car":"319",
    "driver":"Seb",
    "from":"C",
    "destination":"D",
    "pax":"4",
   },
   {
    "date":"2014 10 16",
    "time":"20.22",
    "car":"396",
    "driver":"Seb",
    "from":"G",
    "destination":"A",
    "pax":"1",
   }
  ]
  </code></pre>
  
  <p>This is displayed on the view in a table-like layout. Each row contains the data from an object, and initially doesn't include the property <code>arrival</code> because the app tracks car movements and the car has not arrived to destination. </p>
  
  <p>Each row has also a button triggering <code>insertRecord()</code>, that defines the arrival time and its supposed to include the <code>arrival</code> property into each object, independently.</p>
  
  <p>So in this example, maybe the car from the second object arrived, and I want to be able to <strong>add the <code>arrival</code> property only for this particular object</strong>, leaving the array like this:</p>
  
  <pre><code>[
   {
    "date":"2014 10 16",
    "time":"20.42",
    "car":"396",
    "driver":"Seb",
    "from":"A",
    "destination":"B",
    "pax":"3"
   },
   {
    "date":"2014 10 16",
    "time":"20.12",
    "car":"319",
    "driver":"Seb",
    "from":"C",
    "destination":"D",
    "pax":"4",
    "arrival":"20.35"
   },
   {
    "date":"2014 10 16",
    "time":"20.22",
    "car":"396",
    "driver":"Seb",
    "from":"G",
    "destination":"A",
    "pax":"1"
   }
  ]
  </code></pre>
  
  <p>The 2 proposed solutions from dfsq allowed me to both define arrival for the first object of the array, or for all the objects at once, but not for each object separately.</p>
  
  <p>This is the HTML code where insertData is called:</p>
  
  <pre><code>&lt;div class="row msf-row" ng-repeat="record in recordlist | filter: search"&gt;
        &lt;div class="col-md-1"&gt;{{record.time}}&lt;/div&gt;
        &lt;div class="col-md-1"&gt;&lt;strong&gt;{{record.car}}&lt;/strong&gt;&lt;/div&gt;
        &lt;div class="col-md-1"&gt;{{record.driver}}&lt;/div&gt;
        &lt;div class="col-md-3"&gt;{{record.from}}&lt;/div&gt;
        &lt;div class="col-md-3"&gt;{{record.destination}}&lt;/div&gt;
        &lt;div class="col-md-1"&gt;{{record.pax}}&lt;/div&gt;
        &lt;div class="col-md-1"&gt;
             &lt;button ng-click="insertRecord()" ng-show="!record.arrival"&gt;&lt;i class="fa fa-cog"&gt;&lt;/i&gt;&lt;/button&gt;{{record.arrival}}
        &lt;/div&gt;
  &lt;/div&gt;   
  </code></pre>
  
  <p>Being so, any hints on how to get there?</p>