$scope disappears following asynchronous call

In a previous project, I had this code working flawlessly. However, when I transferred the code to a new project, even the simplest case is failing.

This is what my controller looks like:

angular.module('myApp.controllers').
  controller('SchoolController', ['$scope',
  function($scope) {
      $scope.school = "what's going on";
      var query = new Parse.Query("School");
      query.first().then(function(result){
          $scope.school = "with this";
          alert(result.get("name"));
      });
}]);

Here is how the html is structured:

<p>school is {{school}}</p>

When the page renders, I can see "school is what's going on" as expected and I receive the alert with data from the server. However, why isn't the bound variable on the page changing to "with this"?

Any insights would be greatly appreciated.

Answer №1

Implement your updates in angular code:

angular.module('myApp.controllers').
  controller('SchoolController', ['$scope',
  function($scope) {
      $scope.school = "what is the issue";
      var query = new Parse.Query("School");
      query.first().then(function(result){
          $scope.school = "having trouble with this";
          $scope.$apply();
      });
}]);

Refer to $apply at this URL

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

What is the method for ensuring text remains within a square while it is being relocated?

Check out this jsfiddle where you can interact with a moving square: http://jsfiddle.net/helpme128/3kwwo53t/2/ <div ng-app="test" ng-controller="testCtrl"> <div id="container"> <div class="shape" ng-draggable='dragOptions& ...

Preventing users from selecting both future and current dates in a Bootstrap datepicker: A Step-by-Step Guide

Issue Description: I am working on a project using React JS and have implemented the bootstrap datepicker. I have set the input type to "date" for the date of birth field, but I need to restrict users from selecting current or future dates. How can I achie ...

What causes Firefox's CPU to spike to 100% when a slideshow begins that adjusts the width and left coordinates of certain divs?

Seeking Advice I'm in need of some help with identifying whether the code I'm working on is causing high CPU usage in Firefox or if it's a bug inherent to the browser itself. The situation is getting frustrating, and I've run out of so ...

Receiving warnings labeled as 'npm WARN deprecated' during the execution of npm install commands

Encountering warnings when running npm commands, seeking guidance on updating dependencies. npm WARN deprecated [email protected]: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possi ...

Using VueJs and BootstrapVue, you can easily set up a table to delete items only on the

I have set up a page showcasing all my items in a BootstrapVue b-table. Each item has the option to be deleted. However, I encountered an unexpected issue when I enabled pagination using the b-pagination element and :per-page attribute. The problem arises ...

Making AJAX requests with Laravel using the XMLHttpRequest object is a

When using Laravel to upload a file and create a progress bar with ajax requests, the form action routes to the controller in this way: <form action="{{ URL::route('upload-file-form-post') }}" method="POST" enctype="multipart/form-data"> ...

Is there a way to create an <a> element so that clicking on it does not update the URL in the address bar?

Within my JSP, there is an anchor tag that looks like this: <a href="patient/tools.do?Id=<%=mp.get("FROM_RANGE") %>"> <%= mp.get("DESCRITPION") %></a>. Whenever I click on the anchor tag, the URL appears in the Address bar. How can ...

Filter the output from a function that has the ability to produce a Promise returning a boolean value or a

I can't help but wonder if anyone has encountered this issue before. Prior to this, my EventHandler structure looked like: export interface EventHandler { name: string; canHandleEvent(event: EventEntity): boolean; handleEvent(event: EventEntity ...

Determine whether the JSON object has been declared

Having trouble determining if the value of values[item]['total'] is defined in a JSON object. The variable item is obtained from the select box value and I am attempting to use an if-else statement to check if values[item]['total'] is ...

Instructions for creating a vibrant pathway using colorful tiles

Is there a way for me to create a path of colored tiles for a character to follow, where the character's path matches the color of the character cube itself? I currently have this code (found in another post): <html><head> <s ...

What methods can be used to continuously send data to another web page within my website using XMLHttpRequest()?

As I delve into working with node.js and express.js, my primary goal is to efficiently tackle a specific issue. One of the pages on my website is tasked with receiving location data in latitude var lat and longitude var long. The challenge at hand is to c ...

What's the best way to retrieve the dates for the current week using JavaScript?

Could anyone help me find a way to retrieve the first and last dates of the current week? For example, for this week, it would be from September 4th to September 10th. I encountered an issue at the end of the month when dates overlap two months (such as t ...

Tips for detecting when multiple image sources have finished loading in an *ngFor loop

I have an array of image URLs that are displayed in a repetitive manner using the *ngFor directive in my HTML code. The technology stack used for this project includes Ionic 4 and Angular 10. <div *ngFor="let url of imagesToLoad; let i = index&quo ...

Effortlessly saving money with just one click

I have a search text box where the search result is displayed in a graph and then saved in a database. However, I am facing an issue where the data is being saved multiple times - first time saves properly, second time saves twice, third time three times, ...

Challenges with browsing navigation in Selenium WebDriver

Recently, I began my journey of learning selenium WebDriver. In an attempt to automate the task of logging into an account using the Firefox browser, I encountered a discrepancy. Manually opening the browser and clicking on the login link from the homepag ...

Creating a nested observable in Angular2: A step-by-step guide

Currently, I am exploring a new approach in my Angular2 service that involves using observables. The data source for this service will initially be local storage and later updated when an HTTP call to a database returns. To achieve this dynamic updating of ...

Enhanced SSL connectivity features in Meteor version 1.8.1

My development server is running on localhost (Windows 10 Pro x64 build 1903) and will eventually be moved to the production environment (Galaxy). To enable authentication through Facebook or Google, HTTPS is required. I configured Nourharidy Meteor SSL on ...

Retrieve the current date in the format of dd/mm/yyyy using AJAX request

var currentDate = new Date(); var todayDate = currentDate.getDate() + '/' + monthNames[currentDate.getMonth()] + '/' + currentDate.getFullYear(); This is my current date retrieval method. It works well but has a minor issue. For to ...

I'm having trouble installing puppeteer

I tried running the command npm i --save-dev puppeteer to set up puppeteer for e2e testing. Unfortunately, an error occurred during installation: C:\Users\Mora\Desktop\JS\Testing>npm i --save-dev puppeteer > <a href="/cd ...

Issue with event.stopPropagation() in Angular 6 directive when using a template-driven form that already takes event.data

I am currently developing a citizenNumber component for use in forms. This component implements ControlValueAccessor to work with ngModel. export class CitizenNumberComponent implements ControlValueAccessor { private _value: string; @Input() place ...