Angular controller scope not updating after jQuery ajax call

angularjs, angularjs-scope, javascript

Solution

Disregarding other architectural issues I pointed out in the comments, the real issue is that you're using `jQuery`'s `ajax` instead of Angular's `$http`. When you don't do things like that through Angular, you're working outside of Angular's scope and it doesn't know about changes. While not ideal, you can use `$scope.$apply` to let angular know something was updated outside of its knowledge. That would look like this:

$scope.$apply(function() {
  $scope.msgs = newMsgs;
});

That is telling Angular that you've modified something it needs to know about from a context that it doesn't know about (the jQuery ajax call in this case).

There are some valid uses of `$scope.$apply()`, such as in event handlers, but most other times it is a sign of bad practices. You should definitely be using Angular's `$http` for ajax calls.

Problem

i have this code and i can't see where is the source of problem, i don't get any error in the chrome console my controller : ``` function notifController($scope) { $scope.refreshMsgs = function () { $.post("notification-center-trait.aspx") .success(function (data) { $("#loadedthings").html(data); newMsgs = JSON.parse($("#label1").html()); $scope.msgs = newMsgs; }); } $scope.refreshMsgs(); } ``` `label1` and `label2` are loaded correctly inside a div loadedthings; newMsgs in the console is parsed just the way it should; i had it working for other pages but it seems that i missed something on this one.i have `<html ng-app>` tag : ``` <div ng-controller="notifController"> <div class="row"> {{msgs.length}} new msgs : <table class="table"> <tbody > <tr ng-repeat="msg in msgs"> <td> {{msg.sender}} </td> <td> {{msg.message}} </td> <td> {{msg.date}} </td> </tr> </tbody> </table> </div> </div> ``` i get 'undefined' in the console when i execute this : `angular.element($0).scope()`

Original source

Related problems