Angular.js factory object not refreshed in view

Question

I have single view displaying investments + two others which are modals to register new investment which show up when user clicks 'add' (two modals because of two steps of registration). I created factory which is used in step1 and then in step2 in order to keep information regarding investment being registered - it works when you switch between step1 and step2, back and forth.
The problem is that within first view displaying investments I have icon "edit" and within its handler (edit method) I assign selected investment to factory but no change is reflected in step1 view, alas.

View displaying investments:

var module = angular.module("application", []);

module.controller("investmentsController", function ($scope, investmentsFactory, newInvestmentFactory) { 
    $scope.edit = function (id) {
        for (var i = 0; i < $scope.Investments.length; i++) {
            if ($scope.Investments[i].Id == id) {
                newInvestmentFactory.update($scope.Investments[i]);
            }
        } 
        $("#addInvestmentStep1Modal").modal("show");
    };
});

View step1 of registration

var module = angular.module("application");

module.factory("newInvestmentFactory", function () {
    return {
        investment: {
            Name: "",
            Description: "",
            Category: "",
            InterestRate: "",
            Duration: "",
            AmountRange: "",
            Url: "",
            Subscription: 0,
            PaymentType: "",
            Icon: ""
        },
        update: function (investment) {
            this.investment = investment;  
        }
    };
});

module.controller("newInvestmentStep1Controller", function ($scope, newInvestmentFactory) {
     $scope.Investment = newInvestmentFactory.investment; 
});

View step2 of registration

var module = angular.module("application");

module.controller("newInvestmentStep2Controller", function ($scope, newInvestmentFactory) {
    $scope.Investment = newInvestmentFactory.investment; 
});

The step1 view displaying registration is following

<form id="newInvestmentStep1Form" class="form-horizontal">
      <div class="input-group">
        <span class="input-group-addon input-group-addon-register">Name</span>
        <input id="Name" name="Name" type="text" class="form-control" ng-model="Investment.Name" required title="Pole wymagane" />
      </div>

Assignining new object to factory's object (newInvestmentFactory.investment) does not seem to be working but when I assign brand new value to some property of factory like

newInvestmentFactory.investment.Name = "name"

then it displays value correctly.

Answer 1

I can only suspect newInvestmentFactory 's update method code. It is reassigning investment object to new investment object like this.investment = investment . By that line new investment object gets created, and old investment loose the reference. To keep the investment object to not create a new variable in update method, you could use angular.extend / angular.merge method. This method will not create a new reference of an object, but it ensures that all object property got updated.

update: function (investment) {
    angular.extend(this.investment, investment);
}

Answer 2

In your step controllers

$scope.Investment = newInvestmentFactory.investment;

is just one time assignment to $scope variable, this is not two way binding, so even if value of newInvestmentFactory.investment changes scope won't be updated. What you can do is to watch the factory variable newInvestmentFactory.investment and on change update the scope manually.

Hope this helps