Angularjs push to array in service replaces previous items

Question

I am trying to add to a list in a home.html and display the list in myOrders.html using ionic and angularjs.

The problem is that when I push a new item to the array, the previous items get replaced with the new item.

Example:

push 'one' -> array is [{'name':one'}]

push 'two' -> array is [{'name':'two'},{'name':'two'}] // should be [{'name':'one'},{'name':'two'}]

push 'three' -> array is [{'name':'three'}, {'name':'three'}, {'name':'three'}] // should be [{'name':'one'},{'name':'two'},{'name':'three'}]

I have added the relevant parts of my code below.

home.html (Add to list)

<ion-view title="Home">
    <ion-content ng-controller="homeCtrl">
        <form ng-submit="submitForm(product)" class="list">
            <input ng-model="product.name" type="text">
            <input type="submit" value="Search" class="button">
        </form>          
    </ion-content>
</ion-view>

myOrders.html (Display list)

<ion-view title="My Orders">
    <ion-content ng-controller="myOrdersCtrl">
        {{ product }}
    </ion-content>
</ion-view>

controllers.js

angular.module('app.controllers', [])
...
.controller('homeCtrl', function($scope, $state, formData) {
        $scope.product = {};

        $scope.submitForm = function(product) {
            if (product.name) {
                formData.updateForm(product);
                $state.go('menu.myOrders');
            } else {
                alert("Please fill out some information for the user");
            }
        };
    })

.controller('myOrdersCtrl', function($scope, formData) {
    $scope.product = formData.getForm();
})

services.js

angular.module('app.services', [])

.service('formData', [function(){
    return {
        form: [],
        getForm: function() {
            return this.form;
        },
        updateForm: function(item) {
            this.form.push(item);
        }
    }
}]);

Answer 1

You are inserting same object again and again into the array. As objects are always pass-by-reference so, reference of same object is pushed into array. When you update the object all references stored in array are changed.

Try something like creating copy of your object, while passing to updateForm()

.controller('homeCtrl', function($scope, $state, formData) {
        $scope.product = {};

        $scope.submitForm = function(product) {
            if (product.name) {
                formData.updateForm(angular.copy(product));
                $state.go('menu.myOrders');
            } else {
                alert("Please fill out some information for the user");
            }
        };
    })