When the ng-model is updated within a promise's .then() function, the ng-change

I've encountered an issue with ng-change in a select not triggering when I update the ng-model parameter within my promise.then function. Here's my select code:

<select ng-model="currentReport"
    ng-options="rpt.ReportDisp for rpt in availableReports" 
    ng-change="updateDependent()"></select>

My 'availableReports' array is fetched using a $http call in my service. After the call completes, I want to ensure the first entry is selected and perform the following code:

webServices.getReports(user, menu1, menu2)
            .then(function (result) {
                $scope.availableReports = result.data.d;
                $scope.currentReport = $scope.availableReports[0];
             }

This code successfully sets the select to the 1st report, but the ng-change event does not trigger the 'updateDependent()' function.

I also attempted to directly call the 'updateDependent()' function within the .then block like this, however, $scope.currentReport was undefined when the function was invoked:

webServices.getReports(user, menu1, menu2)
            .then(function (result) {
                $scope.availableReports = result.data.d;
                $scope.currentReport = $scope.availableReports[0];
                updateDependent();
             }

Does anyone understand what might be causing this issue?

Update: Problem Solved!

The problem was that the 'updateDependent' function was defined as '$scope.updateDependent()', so I needed to update the reference in the associated .then function to '$scope.updateDependent()'.

Answer №1

I'm uncertain about the specifications regarding when ng-change triggers upon an update from the controller, but concerning your other concern.

I suggest altering updateDependent to accept a parameter like this:

<select ng-model="currentReport"
    ng-options="rpt.ReportDisp for rpt in availableReports" 
    ng-change="updateDependent(currentReport)"></select>

and in your server-side code

webServices.getReports(user, menu1, menu2)
        .then(function (result) {
            $scope.availableReports = result.data.d;
            $scope.currentReport = $scope.availableReports[0];
            updateDependent($scope.currentReport);
         }

I believe it's beneficial to clearly state what the function does by passing in a parameter for better readability. Additionally, it simplifies the testing process for updateDependent.

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

Utilizing the v-for directive to loop through JSON data with unique IDs and linking them to Input components in PrimeVue

In my database, I have a collection of products with a column named attributes that stores property/value pairs in JSON format. Each product can have unique attributes. For instance, one product's attributes could be: #product1 attributes { color: & ...

Utilizing LocalStorage in an Ionic application to store data on a $scope

Having trouble saving the array named $scope.tasks to LocalStorage while building a To Do List app. Tried multiple times but can't figure it out. Here's the code, appreciate any help :^) index.html <!DOCTYPE html> <html> <head& ...

The jQuery prop("disabled") function is not operating as expected

Although I've seen this question answered multiple times, none of the suggested solutions seem to be working for my specific example. Hopefully, a fresh set of eyes can help me figure out what's going wrong. Even after adding alerts to confirm t ...

What is the best way to provide data to a directive if the scope is asynchronously populated?

Within my code, I have a controller responsible for fetching data asynchronously. This data is then used by a directive in the application. Unfortunately, there seems to be an issue with the directive not displaying the fetched data properly. Interestingl ...

Why does e.target.value only capture the initial letter of a string input in ReactJS?

Is the current method correctly capturing only the first letter in the string input? class Example extends React.Component{ state={ name:'Ajith' } changeEvent = (e) => { console.log('change : '+this.s ...

JavaScript: a highly effective method for verifying if a variable is a function, an array, or an object

Imagine a scenario where we have a variable that could potentially be a function, object, or array. I am in search of the most efficient method to determine its type. In my opinion, the current approach is not optimized because if I already know that isF ...

Using JavaScript and AJAX to manage and control a shell interface

Looking to create an HTML page that includes a YouTube video and utilizes JavaScript with the YouTube API. The objective is to embed a video and test if it has been fully downloaded using the YouTube API. I have set up an Apache server with MySQL and PHP ...

The 'load()' event method in jQuery does not function properly within the 'ready()' event method on mobile browsers

After testing on Firefox mobile and Chrome mobile browsers, I found that my code works perfectly on computer browsers. Below is the code I have inside the ready() and load() event methods: $(document).ready(function(){ $(window).on('load hashchan ...

Tips on detecting a collision between a cube mesh and the boundaries of a browser using ThreeJS

I'm a beginner in 3D games and ThreeJS. In the image above, my Mesh is located at the left boundary of the browser with a position of -1035 instead of 0. This leads me to question what exactly is the relationship between mesh.position.x in ThreeJS and ...

Include the session variable as an argument in the onload() function call

I've encountered a problem while trying to send the session variable $_SESSION["post-code"] as a parameter in the following code snippet... <body onload="getLocation('<?php echo $_SESSION['post-code'];?>')"> Within my ...

Leveraging JavaScript for Validating Radio Buttons

I've been following a tutorial guide on this specific website , but I'm encountering some difficulties despite following the exact steps outlined. Can someone provide guidance? Here is what I have done: <html> <script> fu ...

The "next" button on my carousel is unresponsive and the automatic transitioning feature is not working

I'm having trouble implementing a carousel on my website. The next/previous buttons and automatic slides are not functioning properly. <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <!- ...

React - the state fluctuates

The Goal I'm Striving For: Transmitting data from child to parent. My Approach: Utilizing this.state as outlined here Having trouble summarizing the issue: Upon calling console.log(this.state) in the function where I update the state, the correct va ...

How to pass a JSON object to a component's constructor in Angular 2

In a unique situation, my primary component config.editor.component performs extensive processing and generates various JSON objects. I am content with this approach. The template for this component then proceeds to render another component - api.entry.com ...

Rendering a Nativescript component once the page has been fully loaded

I'm currently working on integrating the WikitudeArchitectView into my TypeScript code. I've successfully registered the element in the main.ts TypeScript file: var architectView = require("nativescript-wikitudearchitectview"); registerElement ...

The proper method for organizing a nested array object - an obstacle arises when attempting to sort the array

I have a collection of data fetched from Web API 2.2 stored in an Angular array as objects. Each object represents a Client and includes properties like name, surname, and a collection of contracts assigned to that client. Here is the interface definition ...

Concurrent execution within a Node.js function

I am facing a challenge with my function that deals with 1400+ crypto pairs. Each pair requires an API call and data storage, resulting in a significant amount of time for the entire process. The bottleneck occurs because each pair takes approximately 3-4 ...

Error message: "AngularJS encountered a $injector:modulerr error in Internet Explorer 11."

I've successfully created an AngularJS App that functions properly on most browsers like Firefox, Opera, Safari, Edge, and Chrome. However, there seems to be a compatibility issue with IE 11. When attempting to open the app in IE 11, the following er ...

Encountered an issue while loading a pretrained JSON model in a JavaScript script within a locally hosted

At the moment, I am using TensorFlow in Python to train a model and saving it as model.json along with the BIN file in a folder named models. My goal is to develop a web application that can load this pre-trained model for prediction. However, I have been ...

JavaScript Lightbox for Full Page Content (or near full page)

One option to consider is always jQuery. I am in search of a lightbox that provides a "full screen" effect. Not necessarily filling the entire screen, but rather covering most of the content on the page. The lightboxes I have come across either only displ ...