Angular pushing into an array gives: TypeError: Cannot read property 'push' of undefined

Question

I am trying to push the details from textbox to an array in AngularJS. But it doesn't work

AppName.factory('sampleFactory', function(){
        var customerdetails=[
                {name:'John Smith', country:'Denmark', worth:'5000000'},
                {name:'John Lewis',country:'England',worth:'10000000'},
                {name:'Rick Evans',country:'America',worth:'6000000'}
            ];

        var factory={};
        factory.getCustomers=function(){
            return customerdetails;
        };

        return factory;
    });

AppName.controller('homeController', function($scope, sampleFactory){
    $scope.customers= sampleFactory.getCustomers();

    $scope.addCustomer = function(){
        $scope.customerdetails.push({
            name:$scope.customerName, 
            country:$scope.customerCountry,
            worth:$scope.customerWorth
        });
    };
});

The page has a button with ng-click="addCustomer". But it doesn't add to the array.

The factory part works fine. I am sure I have made an error in the addCustomer function. Can somebody spot it? Thanks!

Answer 1

You are using the wrong variable name, it should be $scope.customers:

$scope.addCustomer = function(){
        $scope.customers.push({
            name:$scope.customerName, 
            country:$scope.customerCountry,
            worth:$scope.customerWorth
        });
    };

You mistook it for the variable name of the service.