AngularJS fails to update the view following a change in the model triggered by an event

I've put together a Plunker example illustrating the issue I'm facing with my app.

Here's a brief overview of the scenario:

  • A controller loads a list of transactions (objects of type Transaction) into the $scope
  • This controller listens for an event triggered by a service responsible for persisting new or updated Transaction objects, then refreshes the model
  • The view uses ng-repeat to display the transaction list
  • Each transaction can be individually updated (committed or rolled back)
  • The AngularJS app has a run() function that generates a new Transaction object every 2 seconds, simulating external data coming in (e.g., from an $http request to a server)

One thing you'll notice is that the view doesn't update when the model gets reassigned with a new list of objects after receiving the service's event.

I've been struggling with this issue for the past two days. The usual culprit for this behavior is manipulating the model outside of AngularJS without invoking $apply(), but I don't think that's the case here.

I've also checked $scope.$$phase and manually called $apply or $digest (although not recommended) without any luck.

Could it be something I'm overlooking? Is it a bug? Any other approach I could try?

Answer №1

Additionally to being "outside of Angular," setInterval may benefit from using $apply. By wrapping the transactions.persist(t); in app.js within $rootScope.$apply(), you can observe the list refreshing every two seconds. Not only that, changes made by clicking on the "COMMIT" and "ROLL BACK" buttons will be instantly reflected as well.

Check out this working plnkr example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for crafting interactive Dropdown menus

Visit this link for more information Hello all, I am a beginner in HTML and Javascript and seeking guidance on how to create dynamic dropdown menus similar to the ones on the provided website. I have successfully implemented the source code, but my questi ...

What advantages could learning ReactJS first give me before diving into NextJS?

Just mastered TS and now faced with the decision of choosing a framework. I'm curious why it's recommended to learn ReactJS before NextJS. I've read countless articles advising this, but no one seems to delve into the reasons behind it. Ca ...

converting time stamps to written text

Is there a JavaScript library available that can convert a timestamp (Date Java class value) to text? For example: Just two minutes ago 4 hours back 23 August 2009 Does such a library exist? If not, I'll take on the challenge of implementing it ...

How can I incorporate a new user interface button into Here Maps?

I have set up a default interactive map using Nokia Here Maps v3. The map contains multiple markers grouped together. Now, I am looking to add a button or some other UI element to the map that, when clicked, will call a function to zoom in as tightly as p ...

Enhance the functionality of jqGrid by customizing key bindings for arrow and tab keys

In order to enhance my jqGrid functionality, I am seeking to implement the ability for users to press different keys for specific actions. For example, pressing Enter should save data (which is currently working fine), while pressing the left arrow key sho ...

Guide on retrieving information from Spark and showcasing it through Angular

Trying to navigate the world of Spark framework and AngularJS as a beginner, I set out to create a basic REST application. However, I hit a roadblock when it came to retrieving data from the server and displaying it using Angular. My initial task was simp ...

Embracing the power of dynamic imports in Next.js 10 with SDK integration for

I attempted to dynamically import the TRTC SDK using Next.js 10: const TRTC = dynamic(() => import('trtc-js-sdk').then((module) => module.NamedExport), { ssr: false }); However, I encountered an error stating "TRTC.createClient is not a co ...

Is there a way to turn off vue.js transitions specifically for testing purposes?

I'm utilizing a vue.js component with the <transition> element for show/hide animations. However, I want to disable the animation for faster testing. How can I achieve this? The solution proposed is * { transition: none !important } in this lin ...

What is the best method for incorporating startbootstrap into a react component?

Seeking assistance with incorporating a StartBootstrap template into my React component. The template can be found at this link. Here is the envisioned page layout: https://i.sstatic.net/bpQyE4Ur.png To ensure proper rendering of the template, I have org ...

JavaScript - Curious about creating HTML elements

I am working on this code snippet: var add, substract, multiply, divide; var calculation = { add: { place: 2, name: add, calculation: function (a,b) {return a + b;}, output: function (a,b) {return a + ' + ' + ...

Attempting to retrieve key-value pairs from a nested JSON array

I am attempting to extract values along with their corresponding key names from a nested JSON array resData =[ { _index: 'web', _type: 'event', _id: 'web+0+93', _score: null, _source: { 'os-nam ...

Using AJAX to dynamically inject a JavaScript function into the webpage

When I load a portion of a page using AJAX calls, sometimes the loaded content may contain script functions attached to controls with different events. The issue arises when these events are triggered, resulting in an error message saying "object not found ...

The feature of webpack that enables it to monitor node modules for hot reloading is currently malfunctioning

Using npm link in our primary application to point to the submodules packages has been successful. I am interested in adding a new feature that involves reloading the app whenever the references placed through npm link are updated, as there may be changes ...

Ways to extract information from JSON files

Currently, I am working on a script to extract viewer count and follower count data from Twitch. While I have successfully retrieved the viewer count information, I am encountering issues with extracting the follower count. The essential information can be ...

Retain only N instances of a particular character within a JavaScript string

Suppose I have a string like this: "a_b_c_d_restofthestring" and I want to keep only 2 underscores. For example, "a_b_cdrestofthestring" "abc_d_restofthestring" Both of these are valid outputs. This is my current implementation: let str = "___sdaj_ ...

Retrieving and storing state in session storage with React

My webpage features a sidenav with expansion panels that can be opened and closed. I am currently working on setting the state to keep track of which expansion panel is open. However, when I click on one of the items in the sidenav, I get redirected to a ...

What is the best way to accurately synchronize voices in PHP?

I'm attempting to create a personalized voice sentence reader. I have written this code that essentially converts a word into letter-by-letter sounds. However, when I input "Hello," for instance, it doesn't pronounce the word correctly but rather ...

Can you explain the meaning of `<%= something %>` to me?

I've been working on a javascript project and I'm curious about the purpose of surrounding a variable with this syntax? <%= variable %> I attempted to research it myself but didn't come across any helpful information, so my apologies ...

What are the steps to check Drag and Drop functionality using Selenium IDE?

I've been working on implementing tables with jQuery UI's sortable feature, but I'm struggling to come up with a way to test it using Selenium IDE. After searching for a solution, I came across this helpful post: How to test a JQuery UI Sor ...

Showing a collection of objects in a React component

**Recently started learning React and Node, and decided to fetch data into a functional component by following various tutorials. I successfully set up the server, connected it to the database, and fetched the data in React as per the tutorial instruction ...