I'm working through the Angular tutorial, and doing a lot of reading. However, I am having trouble finding an answer to this question. Or, I might be thinking about it incorrectly, which I'm hoping someone can help me out with!

Very simple example:

var phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S.",
     "age": 0},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet.",
     "age": 1},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet.",
     "age": 2}
];

function PhoneListCtrl($scope) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

What I have represented above is a source of data that will e from outside of this controller. I have an existing caching function that will XHR the server as necessary for new data.

Let's say that the model then changes:

phones[3] = {"name": "Something new from the server",
         "snippet": "Here is some new ining data",
         "age": 5};

How do I tell the Angular PhoneListCtrl controller that the model has updated? If you test this yourself and update the array, Angular is not aware of the change, and therefore does not update the DOM.

I'm aware of the $http service, but in my current architecture it is not an option for me to use $http within the controller to obtain the data--the controller needs to be asking an external function that I have written for the data, and I need some way of telling Angular's controller when the data subsequently changes.

Help and insight are appreciated!

I'm working through the Angular tutorial, and doing a lot of reading. However, I am having trouble finding an answer to this question. Or, I might be thinking about it incorrectly, which I'm hoping someone can help me out with!

Very simple example:

var phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S.",
     "age": 0},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet.",
     "age": 1},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet.",
     "age": 2}
];

function PhoneListCtrl($scope) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

What I have represented above is a source of data that will e from outside of this controller. I have an existing caching function that will XHR the server as necessary for new data.

Let's say that the model then changes:

phones[3] = {"name": "Something new from the server",
         "snippet": "Here is some new ining data",
         "age": 5};

How do I tell the Angular PhoneListCtrl controller that the model has updated? If you test this yourself and update the array, Angular is not aware of the change, and therefore does not update the DOM.

I'm aware of the $http service, but in my current architecture it is not an option for me to use $http within the controller to obtain the data--the controller needs to be asking an external function that I have written for the data, and I need some way of telling Angular's controller when the data subsequently changes.

Help and insight are appreciated!

• javascript
• angularjs
• xmlhttprequest

• I think you're looking for $scope.$apply() – elclanrs Commented Jul 29, 2013 at 4:30
• $scope is not available outside of the controller. – vcardillo Commented Jul 29, 2013 at 4:41
• Inject $timeout service, and wrap your code inside it. Then your code'll run in an apply block. docs.angularjs/api/ng.$timeout – Oliver Commented Jul 29, 2013 at 17:25

1 Answer 1

If you are updating the data from outside angular context, you can get the scope for element where controller is defined, using something like

angular.element(domElement).scope()

and then use

$apply method defined on the scope to push updates

See more details here