Issue with $watch in Angular Modal not triggering

Having trouble using $watch with a radio button located inside an AngularJS Modal. The $watch doesn't seem to work when the value changes within the modal.

If I move the radio buttons outside the modal, the $watch functions as expected.

You can see the issue in action here: http://plnkr.co/edit/q8t9qGJg57MMiQGop202?p=preview

In the provided example, if you click on "Open me" and select either of the upper two radio buttons (me or you), the $watch is not triggered and the alert message doesn't appear.

However, if you click on the radio buttons on the main page (outside the modal), the $watch works fine and displays the alert message.

Looking for a workaround to resolve this issue. Any suggestions would be appreciated. Thank you!

javascriptangularjstwitter-bootstrapangular-uiangular-ui-bootstrap

Answer №1

When working with ng-model, it is important to follow the unofficial golden rule:

Ensure there is a "." in your ng-model expression

If the ng-model expression does not contain a dot, it will create a property on the current scope where the element with ng-model is located. This may not be the intended scope, especially when dealing with directives that create child scopes, such as the modal directive from UI Bootstrap.

By including a dot in the ng-model expression, you are referencing an object that will be looked up on the prototype (scope) chain. This ensures that the property is accessed or created on the correct scope.

For example, if you define a $scope.data property in your controller and set the ng-model expression to data.rdd, you can observe and respond to changes effectively within the controller.

To implement this, begin your controller function with:

  $scope.data = {
    rdd: 'me'
  };

  $scope.$watch('data.rdd', function(v, old){
    if(v!==undefined && v !== old)
      alert(v);
  });

Your radio buttons in the HTML should be structured as follows:

        <input type="radio" ng-model="data.rdd" value="me">me
        <input type="radio" ng-model="data.rdd" value="you">you

I have made modifications to your Plunkr for demonstration purposes: view updated version here.

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

Cutting imagery to create a new design element

https://i.sstatic.net/IAh0h.jpg There is an image above with 6 gears (circles with pointy edges). My goal is to separate them into individual pictures and, on each picture's hover, have a relevant line with text appear. How can I achieve this? The a ...

javascripthtmlcss

The imgAreaSelect plugin is up and running successfully. Now, I am looking to utilize the x and y coordinates to make updates to the image stored in the database. How can I

After retrieving the dimensions and coordinates from the jQuery plugin imgAreaSelect, I am looking for guidance on how to update the image in my database based on this selection. The database contains a tempImage and Image field, and my goal is to allow ...

javascriptjqueryjquery-plugins

What are the most effective methods for enhancing this perspective?

I currently have a functional view that I would like to enhance for better optimization. It is currently quite convoluted and I am unsure of the best approach to simplify it. Should I use functions in the controller or create a directive? The main area ...

angularjsoptimizationviewangular-ui-router

Displaying the number of tasks completed compared to the total number of tasks within a JavaScript ToDo list

Currently, I'm in the process of creating a basic ToDo list using HTML, JS, and CSS. The last task on my list is to display to the user the total number of tasks and how many have been completed. For instance, if there are 3 completed tasks out of 7 i ...

javascripthtmlcss

Receive notification of alert content when it is displayed

Having an HTML page with the following script: <Script> function Run() { alert("The Content Here"); return true; } </script> <button onclick="Run();">I Want It Now</button> If I were to open this page using firefox or Chrome, and ...

c#javascripthtmlvb.netwinforms

AngularJS struggles to set the default value for linked dropdown menus

I've successfully created a chained dropdown, but I'm struggling to set initial values for them. Here's what I have so far: <select ng-model="check" ng-options="check.name for check in checks"></select> <select ...

angularjschained

Importing external components from the parent directory in Next.js is a seamless process

I am trying to import react components from an external directory called common into the web-static directory while using nextjs. However, I keep encountering an error that says: Module not found: Can't resolve 'react' in '/Users/jakub ...

javascriptreactjswebpacknext.jsvercel

What is the best place to define data that remains constant?

In a Vue component, I am looking to utilize data that remains constant. The issue arises when attempting to implement the following code: const numbers = [1, 2, 3] new Vue({ el: "#app" }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2 ...

javascriptvue.js

Why is the output [[]] instead of [] after removing the last array like [["1"]] using .splice()?

let array=[["1"]]; array[0].splice(0,1); // array = [[]] Why am I unable to make the sub-array blank when removing the last element? I want array = [] instead of [[]] after removing the last element from a sub-array. Check it out here: http://jsbin.com/ ...

javascriptjqueryarrays

Use React-table to store the value of an accessor in the state while also utilizing a

I am currently working on implementing a checkbox table using react-table. The primary objective is to have checkboxes in the first column, and upon selection of a checkbox, I intend to store the ID defined in the accessor in the state. Despite going thro ...

javascriptjsonreactjsreact-table

The versioning of Ionic for Android experiences a setback

I am facing an issue with the version numbers in the Google Play store. In the past, my app versions were formatted as follows: Version code 10172 (5 digits) Version name 1.1.72 However, after switching build machines, I unknowingly uploaded a version ...

androidangularjscordovaionic-framework

Encountering a 404 Error When Making an Ajax Request in Spring MVC

Looking to implement a basic login form using Spring MVC and an APIResponseModel class with Status, Message, HTTPStatus variables. After submitting the credentials, receiving a 404 ajax response, although the Controller returns {"status":"20 ...

javascriptajaxformsspring-mvcauthentication

Creating a VueJS Web App that is Distributable and Distributed

My challenge is to develop a distributable app using VueJS for four different companies, each with their own unique products database and custom settings. These companies want to integrate a page on their websites that displays their specific catalogue wit ...

javascriptvue.js

Obscured Background Beneath the Bootstrap Tip

Desired Outcome: I am aiming to achieve a blurred background behind the tooltip element. https://i.sstatic.net/AE1RQ.png Current Status The current state shows that the area behind the tooltip is not blurred as intended. https://i.sstatic.net/bE57E.pn ...

csstwitter-bootstrapbootstrap-5opacitygaussianblur

Verification of user input field

For this mini deposit app, I needed to implement validation for the input field to check for three different conditions: no blank entries, only numerical values, and no negative numbers. Despite having the functionality, my attempts at implementing validat ...

javascriptreactjsbootstrap-4

What is the reason behind utilizing the external 'this' within the inner function in Vue: $this=this?

Recently, I came across some code online that included a line $this=this. My initial interpretation was that this line assigns the 'this' of the outer function to a variable, allowing it to be used in the inner function as well. However, upon fur ...

javascriptvue.js

"Adapting Bootstrap dropdown menu to display in the top left corner

While working on a navbar featuring three nav-items with a dropdown-menu class each, I encountered an issue. The first nav-item's dropdown-menu displays correctly, but for the other two, the dropdown-menu seems to shift to the top left. You can view ...

twitter-bootstrapbootstrap-4navbar

Develop a Vue mixin to enable theme switching in a Vue.js application

I have successfully developed three distinct themes: light, default, and dark. Currently, I am working on implementing a toggle function in the footer section that allows users to switch between these themes effortlessly. Following the guidance provided b ...

javascriptvue.js

Steering clear of using HTML tables to display company data

I am eager to enhance the way I present business data to my users. Currently, I am involved in developing a web application management system using MVC Razor .NET, Entity Framework, and Angular JS. One specific page requires displaying a significant amou ...

asp.net-mvcangularjsuser-experience

How can user-side access rights be dynamically granted to a database in PHP?

Seeking a solution to dynamically assign access rights such as edit, view, and delete values in the database for users using PHP. This will allow the super admin to easily change privileges within the application interface without having to manually upda ...

phpjavascript