The Angular scope remains stagnant even after applying changes

Having trouble updating a variable in the ng-repeat loop

<div ng-controller="MapViewCtrl">
            <a class="item item-avatar" ng-href="#/event/tabs/mapView" >
                <img src="img/location.jpg"/>
                <span class="input-label">Locations Of event</span>
                <div ng-repeat="item in positions" style="font-size: 12">{{item.address}}</div>
            </a>
        </div>

Code snippet from controller:

$scope.closePage = function() {
        for (var i = 0; i < markers.length; i++) {
            var lng = markers[i].position.A;
            var lat = markers[i].position.k;
            var address = "";
            var latlng = new google.maps.LatLng(lat, lng);
            $scope.$apply( $scope.geocoder.geocode({'latLng': latlng},function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        address = results[0].formatted_address;
                        var location ={
                            address: address
                        }
                        $scope.positions.push(location);
                    }
                }
            }));
        }
        $state.go('eventmenu.createevent');
    };

Looking for suggestions on how to update the 'positions' variable properly.

Answer №1

Instead of simply passing the code, make sure to enclose it in a function and pass that function to $scope.$apply:

$scope.geocoder.geocode({'latLng': latlng},function(results, status) {
    $scope.$apply(function(){
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                address = results[0].formatted_address;
                var location = {
                    address: address
                }
                $scope.positions.push(location);
            }
        }
    })
});

It's important to call apply within the callback from the geocoder. This notifies Angular to watch for any scope changes.

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

Establish a single route for executing two different statements in MSSQL: one for updating and the other for inserting data into the MS-SQL

I have a Node application where I currently insert data into one table, but now I also need to insert it into another table. The issue is that I am unsure how to execute a second promise for this task. var query = "first SQL query..."; var query2 = "new ...

What is a reliable method to retrieve the text from the current LI if all LI elements in the list share the

I'm encountering an issue with retrieving the text from LI elements because I have 10 list items and they all have the same class name. When I attempt to fetch the text using the class name or id, I only get the text of the last item. Here is my code ...

Issue with smart table sorting functionality

I've been working on a table with just one column that is populated from a string array. However, I'm struggling to get the sorting functionality to work properly. Can anyone pinpoint what mistake I might be making here? Steps taken so far: 1) ...

Looking for a way to extract information from two nested objects within an array by utilizing lodash, and then transferring it as a property to a react component

My react components require dynamic preloading of values from nested arrays within an array of data. import React, { useEffect } from "react"; export function loadComponent({ config, LayoutRenderer }) { const loadModules = (name) => q ...

How can I implement Before() and After() hooks within a hooks.js file for a Selenium and JavaScript project?

Within my Selenium JS / Cucumber framework, I have incorporated Before() & After() functions to handle the setup and tear down of my webdriver. To manage these functions, I decided to organize them in my customSteps.js file alongside other cucumber st ...

Identifying the initial object with a duplicate property within an array of objects using JavaScript

In my code, I have an array structured like this: var myArray = [ {id: 1, entry_id: 1, name: 'test', email: 'email1'}, {id: 2, entry_id: 1, name: 'test', email: 'email2'}, {id: 3, entry_id: 2, name: &ap ...

Update to the viewport meta tag in iOS 7

Anyone experiencing problems with the viewport tag after updating to iOS7? I've noticed a white margin on the right side of some sites. Adjusting the initial scale to 0.1 fixed it for iPhone but made it tiny on iPad 3, which is expected due to the low ...

Unable to assign the value 'hello' to an undefined property in TypeScript

I'm attempting to define a class in TypeScript, but I keep encountering the error shown below. Here is the execution log where the error occurs: [LOG]: "adding" [LOG]: undefined [ERR]: Cannot set property 'hello' of undefined class Cust ...

The Bootstrap Tooltip seems to be glued in place

Utilizing jQuery, I am dynamically generating a div that includes add and close buttons. Bootstrap tooltips are applied to these buttons for additional functionality. However, a problem arises where the tooltip for the first add button remains visible even ...

Emphasizing Text Within Div Element

Imagine having a div element structured as such: <div id="test" class="sourcecode"> "Some String" </div> Can CSS and JavaScript be utilized to highlight a specific portion of that string based on a search query? For instance, if the search q ...

Employing jQuery to populate information into an input field, yet encountering an issue where the data is not being successfully transmitted to

On my page, there is a form with an input box <input name="bid_price" id="bid_price" class="form-control"> If I manually enter a value, it gets posted successfully But when I try to insert a value using jQuery, it doesn't get posted, even tho ...

Utilize AngularJS to integrate a service into the router functionality

What is the best way to inject a service into my router so that its JSON result will be accessible throughout the entire application? Router: export default ['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterP ...

How to retrieve an unknown JSON key in Vue.js when using v-for loop?

I have developed a code analysis tool and I am looking to display my JSON data in a Vue table. The challenge is that I need the JSON key, which represents the package/file name of the directory whose data I want to showcase. Below is an excerpt of the JSO ...

Utilizing JSON data as a variable for handling in a Handlebars view within a Node.js/Express application

I am currently seeking a solution to display a view that includes a variable with data fetched from an API. My technology stack involves express, handlebars, and request. Here is the code for the web server's router: const express = require('ex ...

Failure to retrieve blob - net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

My fetch request code in my front end for a node js express web app hosted on MS Azure works well for small zip file blobs. However, it times out and displays the error net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK) when dealing with large blobs. ...

You are limited to using a maximum of two custom tags within a custom div

I came up with this code that is supposed to style the elements differently based on their tag names. However, when I tested it, the styling did not work as expected. For example, 'London' should be displayed as a large and bold h1 text, while th ...

Obtain the HTTP status code in Node.js

Currently, I am looking to retrieve the HTTP status code of a URL that is passed to a function. Up to this point, I have been using the request module for this purpose. The challenge I've encountered is that the request module fetches all the content ...

Steps to create a personalized material-ui element

I am looking to create a custom time duration component by modifying the TextField component. https://i.stack.imgur.com/fLsFs.png https://i.stack.imgur.com/SdpdH.png If anyone has any advice or assistance, it would be greatly appreciated. Thank you! ...

Obtain the accurate sequence of tr elements in the form of a jQuery object

Even though you can define tfoot before tbody in the source code, when displayed in the browser tfoot will still appear last: <table> <thead><tr><th>i get displayed first</th></tr></thead> <tfoot><t ...

Issues encountered with JavaScript when trying to use the jQuery API

I'm trying to fetch random quotes using a Mashape API, but when I click the button, nothing happens. I've included the JS and HTML code below. Can anyone spot an issue with the JS code? The quote is not displaying in the div. Thank you! $(' ...