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.

  • Just as an aside, you have a cross site scripting vulnerability here because {!products_JSON} is not escape and not quoted. Please instead set this to 'this.products = JSON.parse('{!JSENCODE(products_JSON)}');. As to your question, server side rendering happens on page load, not during live updates. It is useful for pre-populating pages to save 1 round trip, but subsequent updates should be handled with xhrs. Dec 23, 2016 at 22:03

1 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.

  • Could you possibly supply an example of what you mean by "In an Angular app you would normally..." I tried creating an angular function to reset the this.products variable, in a sense, but that also did not do anything. How can I return a result from the controller through the apex:actionFunction, in a sense, and to the function call in the Angular controller? Dec 23, 2016 at 22:24
  • @KonnorMcDowell Calls like apex:actionFunction aren't much use in this situation; see e.g. How to develop Salesforce Visualforce apps using AngularJS ? for alternatives.
    – Keith C
    Dec 23, 2016 at 22:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .