AngularJS Directives: Change $scope not reflected in UI

by

Event handlers are called “outside” Angular, so although your $scope properties will be updated, the view will not update because Angular doesn’t know about these changes.

Call $scope.$apply() at the bottom of your event handler. This will cause a digest cycle to run, and Angular will notice the changes you made to the $scope (because of the $watches that Angular set up due to using {{ ... }} in your HTML) and update the view.

More Related Contents:

  1. Delaying AngularJS route change until model loaded to prevent flicker
  2. AngularJS : Initialize service with asynchronous data
  3. Way to ng-repeat defined number of times instead of repeating over array?
  4. What is the difference between angular-route and angular-ui-router?
  5. Call AngularJS from legacy code
  6. Migrating AngularJS to Angular 4,5 (with DEMO) [closed]
  7. AngularJS sorting by property
  8. Angularjs – ng-cloak/ng-show elements blink
  9. How to add many functions in ONE ng-click?
  10. How to trigger ngClick programmatically
  11. How to reload or re-render the entire page using AngularJS
  12. Ng-model does not update controller value
  13. Angularjs “Controller as” or “$scope”
  14. orderBy multiple fields in Angular
  15. How to set the id attribute of a HTML element dynamically with angularjs (1.x)?
  16. How to filter by object property in angularJS
  17. AngularJS – Image “onload” event
  18. Composing multipart/form-data with a different Content-Type on each parts with Javascript (or Angular)
  19. What is the elegant way to get the latest date from array of objects in client side?
  20. How to make a jsonp request
  21. JavaScript: Remove duplicates of objects sharing same property value
  22. Can an angular directive pass arguments to functions in expressions specified in the directive’s attributes?
  23. CORS error for application running from file:// scheme
  24. The view is not updated in AngularJS
  25. Using Express Handlebars and Angular JS
  26. AngularJS ng-include inside of Google Maps InfoWindow?
  27. Tell screen reader that page has changed in Backbone/Angular single-page app
  28. how to fix 404 warnings for images during karma unit testing
  29. How do I pass multiple attributes into an Angular.js attribute directive?
  30. Globally defined AngularJS controllers and encapsulation

Leave a Comment