Angular controller scope not updating after jQuery ajax call

by

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.

More Related Contents:

  1. Controller not a function, got undefined, while defining controllers globally
  2. How do I share $scope data between states in angularjs ui-router?
  3. Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
  4. Losing scope when using ng-include
  5. How to do two-way filtering in AngularJS?
  6. How to set the id attribute of a HTML element dynamically with angularjs (1.x)?
  7. $watch an object
  8. ion-content and ion-footer have different $scope
  9. Update parent scope variable in AngularJS
  10. Angularjs: call other scope which in iframe
  11. Angularjs: ‘controller as syntax’ and $watch
  12. Dynamic form name attribute in Angularjs
  13. Can an angular directive pass arguments to functions in expressions specified in the directive’s attributes?
  14. AngularJS: open a new browser window, yet still retain scope and controller, and services
  15. Confirmation dialog on ng-click – AngularJS
  16. Genuinely stop a element from binding – unbind an element – AngularJS
  17. ng-click not working in dynamically created content
  18. Ionic Framework: $scope is undefined in simple alert
  19. Scope issues with Angular UI modal
  20. AngularJS using $rootScope as a data store
  21. What is the difference between $scope.$root and $rootScope?
  22. AngularJS event on window innerWidth size change
  23. AngularJS : Difference between the $observe and $watch methods
  24. How to validate inputs dynamically created using ng-repeat, ng-show (angular)
  25. Difference between the ‘controller’, ‘link’ and ‘compile’ functions when defining a directive
  26. angular ng-repeat in reverse
  27. Getting values from query string in an URL using AngularJS $location
  28. Skip ng-repeat JSON ordering in Angular JS
  29. AngularUI-Bootstrap Typeahead: Grouping results
  30. How to bind an AngularJS controller to dynamically added HTML?

Leave a Comment