Update object properties in Angular controller dynamically

Take a look at my simple plunker

Within the code, I am attempting to link a scope variable to an object property.

$scope.name = 'World';
var obj = {
  "name":$scope.name
}
$scope.$watch('name', function(){
  console.log(obj["name"]);
})

Even after changing the name, the console.log consistently displays "World." How do I go about updating the obj with this change?

This query specifically pertains to extracting values from alternative sources (such as function parameters) due to the necessity of modifying obj for use in other sections of code.

Answer №1

To easily reference the object obj, you can directly bind it since it is an object:

<body ng-controller="MainCtrl">
    <p>Hey {{obj.name}}!</p>
    <input type="text" ng-model="obj.name" />
</body>

$scope.obj = {
    "name": 'Universe'
}

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

Managing data binding for checkboxes within a constantly changing set of options

I'm currently working on designing an angular directive for selecting items from a categorized list. Each item in the list should be selectable using a checkbox. The input data that will be provided to the directive looks something like this: [ { ...

Tips on incorporating "get_template_directory_uri" into a JavaScript function

I am currently working on my WordPress PHP file code, where I have included a JavaScript snippet to display names and images from a query. While the names are being displayed correctly, I am encountering an issue with the images not showing up. After tryi ...

The JSON retrocycle function selectively converts certain references only

I have an array of objects with some cyclic references. To handle this, I used JSON.decycle when sending the object via JSON and JSON.retrocycle on the receiving end. For example: var refactor_data = JSON.retrocycle(JSON.parse(event.data)); The issue is ...

What is the best method for transferring properties to the parent component using Vue router?

I have a multi-step form that each step has a different header structure. The only variation in the header among the steps is the wording, which changes as you progress through the steps. I am looking for a way to achieve this using Vue Router: pa ...

What is the best way to change routes within my React application?

I am currently facing a challenge with the Routes in my work's web application. The existing method of accessing routes involves manually typing in the extended path in the browser, which is not ideal. I want to enhance this by adding new routes that ...

What is the best way to retrieve a jobID from Kue?

I am currently working with Express and I'm facing a challenge in creating a job whenever someone posts to my route. My goal is to have the response include the job.id, but the job id is only generated within the callback of my queue.createFunction. I ...

The $urlProvider is inaccessible and cannot be resolved within the controller

When I inject $urlProvider in module.config(), everything works fine. However, when I try to inject it in module.controller(), I receive an error: Unknown provider: $urlRouterProviderProvider <- $urlRouterProvider <- MyCtrl I have included the angu ...

Utilize the power of XMLHttpRequest to fetch and load numerous audio files, seamlessly integrating them for playback through the Web Audio

I am looking to create a web application that loads three different audio files, each one second long, in a specific order, and then merges them into a single Audio Buffer consecutively. To illustrate my goal, here is a sample code snippet: var AudioCo ...

Preventing memory leaks by harnessing the power of Node Streams and promises

I am trying to wrap node streams in an async function, but I'm concerned about potential memory leaks in the following code. Will readStream and result be properly garbage collected after the promise is resolved or rejected? If not, what steps can I t ...

hover effect with fading transition while mouse is still hovering

Is there a way to create a fade-in/fade-out effect on a div without the mouse needing to leave the area? Let me provide a clearer explanation: When the mouse enters the object The object gradually fades in Then, after a delay, the object fades out while ...

Connect data dynamically to the p-table based on columns

I'm facing a challenge in displaying JSON data in a table format, and I'm looking for a way to accomplish this using p-table. When looping through the data, I'm noticing duplicate records in the rows. Can anyone guide me on how to achieve th ...

Sorting through mongoose information on the front end using EJS depending on a dropdown pick

Beginner embarking on my inaugural project here. I have developed 2 Mongoose schematics and models for managing categories and products. The products are nested within the corresponding categories model. Using Node and Express, I successfully sent all ca ...

What is the best way to combine PHP and HTML within a JavaScript script?

I'm facing a challenge with integrating dynamically added elements and a populated drop down on my form. Is there a way to combine the two seamlessly? Below is the code snippet I'm using for dynamically adding and removing elements: $(docu ...

Retrieve the number of days, hours, and minutes from a given

Is it possible to use JavaScript (jQuery) to calculate the number of days, hours, and minutes left before a specific future date? For example, if I have a timestamp of 1457136000000, how can I determine the amount of time remaining in terms of days, hours ...

Are you struggling with NodeJS asynchronous callback not achieving success?

Currently, I am working on developing a scraper that utilizes the async.map feature to iterate through an array, perform certain logic, and then map them to different values. async.map($('.listing tr').toArray(), GetLink, function(err, results) ...

Is there a way to make the React component automatically refresh upon clicking the search button?

Just starting out with React and JavaScript, I decided to experiment with accessing a public API. Here is the function I created: import { useState } from "react"; import CountrySWR from "./CountrySWR"; export default function SearchFo ...

What is the process for setting a cookie in Next.js from a different backend server?

I have encountered an issue with my Node.js API built using Express.js. The cookie I set works perfectly fine on Postman, but for some reason, it is not functioning properly in Next.js. I set the cookie when a user logs in, but it is not appearing in the b ...

How can I prevent list items in jQuery Mobile from being truncated with ellipses?

Here is the list I am working with: <ul id="linksList" data-role="listview" data-inset="true" data-filter="true"> <!-- Dynamic contents! --> </ul> This list pulls its data from a local XML file (RSS feed). I am looking f ...

Modify CSS class if user is using Internet Explorer version 10 or above

I am attempting to modify the CSS of 2 ASP controls using jQuery specifically for users accessing the site with Internet Explorer 10 or 11. This adjustment is necessary because IE10 onwards, conditional comments are no longer supported. My approach to achi ...

Exploring protractor and webdriver basics in the context of a non-angular application

Currently, I am in the process of writing end-to-end tests for a non-angular application using Protractor. While there is a wealth of information available on how to achieve this, it appears that there are multiple approaches to consider. This has led me ...