Reloading a controller variable with AngularJS

Question

I am new to AngularJS. The problem I am having is that I am changing a variable on my visualforce controller, yet AngularJS does not change.

Here is my angular controller:

// On Visualforce Page
app.controller('MainController', function($scope) {
   this.products = {!products_JSON};
   $scope.ngUpdateAmazon = function(prod_id, amaz_id) {
      updateAmazon(JSON.stringify(prod_id), JSON.stringify(amaz_id));
   }
});

Where products_JSON is a variable on the controller:

// On Controller
public String products_JSON { get { return JSON.serializePretty(products); } set; }

And products is a List of sObjects that will remain undisclosed. The ngUpdateAmazon function goes through an apex:actionFunction that goes to a void method on the controller. That void method on the controller updates products and refreshes products_JSON with the new value of products.

Here is my issue: when products_JSON is changed, even though it is directly represented as a variable in the AngularJS controller, the page does not change to represent the variable's change.

Example: I change I field of products from "Test_A" to "Test_B" and run the command:

// On Controller
this.products_JSON = JSON.serializePretty(products);

yet nothing changes on the visualforce page.

Any help would be appreciated. Note that a table is being generated from these variables, and I don't want that whole table to refresh.

Answer 1

The expression:

this.products = {!products_JSON};

will be translated into text by the server when the Visualforce page is first generated:

this.products = [{...}, {....}, ...];

and then when that text is loaded into the browser, the browser's JavaScript interpreter will initialize the products variable to the JavaScript object that the JSON represents.

The apex:actionFunction updates the controller variable but (presumably) does not result in the part of the page that has the JavaScript this.products = ... assignment in it being regenerated so there is no change to the JavaScript variable. In an Angular app you would normally return a JavaScript result when you make a JavaScript call to the server and assign that to a JavaScript variable rather than re-render part or all of the page to get the update.