How do I push multiple objects to an array without overwriting the array with the most recent object that was pushed
<p>The problem i'm having is that whenever I click submit, the object gets pushed to the array. When I click submit to add another ingredient to the array it pushes another object to the array but also copies it's information into all previous objects in the array. </p>

<p>html</p>

<pre><code>&lt;form ng-submit="addToIngredients(newIngredient)"&gt;
        &lt;input ng-model="newIngredient.quantity" placeholder="e.g. 1/3" type="text"&gt;
        &lt;select ng-model="newIngredient.unit"&gt;
          &lt;option value="ml"&gt;ml&lt;/option&gt;
          &lt;option value="l"&gt;l&lt;/option&gt;
          &lt;option value="tsp"&gt;tsp&lt;/option&gt;
          &lt;option value="tbsp"&gt;tbsp&lt;/option&gt;
          &lt;option value="floz"&gt;floz&lt;/option&gt;
          &lt;option value="cup"&gt;cup&lt;/option&gt;
          &lt;option value="pnt"&gt;pnt&lt;/option&gt;
          &lt;option value="qt"&gt;qt&lt;/option&gt;
          &lt;option value="gal"&gt;gal&lt;/option&gt;
          &lt;option value="qty"&gt;qty&lt;/option&gt;
        &lt;/select&gt;
        &lt;select ng-options="stockItem.name for stockItem in stockItems track by stockItem._id"
                ng-model="newIngredient.item"&gt;
        &lt;/select&gt;
        &lt;button type='submit'&gt;Add to ingredients&lt;/button&gt;
      &lt;/form&gt;
</code></pre>

<p>function on controller</p>

<pre><code>$scope.ingredients = [];
$scope.addToIngredients = function(newIngredient){
    $scope.ingredients.push(newIngredient);
  }
</code></pre>