How can I clear a text box in Angular.js when the Google Autocomplete event is triggered?

Seeking assistance in AngularJS to clear the textbox value upon triggering the google map autocomplete event. Can anyone provide guidance?

Here is the HTML code -

<input ng-model="deployText" id="search_execute" class="form-control" type="text" placeholder="Enter locations">

Below is the JavaScript code inside Controller function -

var autocomplete = new google.maps.places.Autocomplete($("#search_execute")[0], {types: ['(cities)']});
        google.maps.event.addListener(autocomplete, 'place_changed', function() {         
            var place = autocomplete.getPlace();
            angular.element(document.getElementById('execute_place')).append("<div style='float:left'>"+place.address_components[0].long_name+"</div>");

            $scope.execute.push({latitude:place.geometry.location.lat(), longitude:place.geometry.location.lng()});

            $scope.deployText = "";  //I need help with clearing the text  

        });

Answer №1

In order for changes to take effect on non-angular components, it is necessary to utilize $scope.$apply().

Here is an example:

$scope.deployText = "";  //Clearing the text content
$scope.$apply();

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 best way to show the user's name on every page of my website?

I'm facing an issue where I can successfully capture the username on the home page using ejs after a login, but when transitioning to other pages from the home page, the username is no longer visible. It seems like I am missing some logic on how to ha ...

Engaging with tasks like incorporating fresh elements into JavaScript code

I am looking to implement an event listener that triggers whenever a new element is added to the document or any of its children. Can someone recommend a method for accomplishing this? ...

Updating certain fields in AngularJS with fresh data

I am facing a challenge with the following code snippet: <div ng-controller="postsController"> <div id = "post_id_{{post.postid}}" class = "post" ng-repeat="post in posts"> ...... <div class="comments"> < ...

tips for incorporating jade Mixin in JavaScript

Experimenting with test mixins in jade language mixin test(testName) #test span Test String Desire to incorporate this functionality into javascript (as declared in the jade file) script(type='text/javascript'). $( document ).on( "cli ...

Route is not simply a component in this context. When using Routes, all component children must be either a Route or wrapped within

I am currently working on my App.js file and encountering an issue while creating paths. I have wrapped a Route element around my IsUserRedirect, but the error persists. import React, {Fragment} from 'react'; import * as ROUTES from './cons ...

The chat message section is failing to update due to AJAX not refreshing

I recently launched a new website and am facing challenges with the chat feature. Despite using ajax to update the chat messages without refreshing the page, the other user still needs to refresh in order to see the latest message. We are both in the sam ...

pausing a timer using JavaScript or jQuery

My goal is to make my clock stop at zero and then display the results page. Unfortunately, I am currently facing difficulties in achieving this. var clock = { time: 2, timeleft: 0, bigben: null, countDown: function() { clock.time--; $("#timer") ...

Updating tag content dynamically using jQuery

I have the following HTML code: <div class="selfclear"> <h3><a id="lnkName" href="/dir/subdir/?id=577">Name</a></h3> <address> Street name, 3 <br />3222 City<br />Phone. ...

Issues with Retrieving Nested Arrays

I am encountering an issue with an object within an array and I am looking to specifically display that as an array. data1 const data1 = [ { "id": "01", "info": "fefef", "sub": "hieei&qu ...

Is there a way for me to make this Select update when onChange occurs?

I am facing an issue with a react-select input that is supposed to display country options from a JSON file and submit the selected value. Currently, when a selection is made, the field does not populate with the selection visually, but it still sends the ...

Renew the Look of Dynamic HTML with Updated Styles

In the middle of my website, there is a console that contains links to dynamically update its content using javascript. Everything works smoothly, but the new HTML added dynamically does not have any styling applied to it. Is there a way to refresh the CS ...

It is not possible to invoke a function within the AJAX success method

When trying to display an error message in my notify (toast) div using jQuery in Ajax success, I am encountering difficulties. Despite decoding the response from the URL properly, only .show() and .hide() functions seem to work. Although I have used conso ...

Combining audio and video streams in Node.js

I'm currently developing a YouTube video downloader using the ytdl-core library. However, I've encountered an issue where it cannot fetch high quality videos with audio because they are stored in separate files on YouTube. My goal is to download ...

Embracing async-await while awaiting events in node.js

I am attempting to incorporate async await into a project that is event-driven, but encountering an error. The specific error message I am receiving is: tmpFile = await readFileAsync('tmp.png'); ^^^^^^^^^^^^^ SyntaxError: Unexpec ...

Express.js continues to retrieve outdated query results that have already been removed from the database

I am experiencing a strange issue with my PostgreSQL and Express.js setup. Despite updating my database with new entries and deleting old ones, it seems to only display the old data that was deleted days ago. It's almost as if it's stuck in some ...

Node.js application experiencing bug with End of Line (EOL) not displaying correctly

I've encountered an issue with my node.js application that involves writing the following code: word_meaning = 'line 1' + os.EOL +'line 2'; When attempting to render this in an HTML file using the following code: <p> <% ...

UI-Router is malfunctioning, causing ui-sref to fail in generating the URL

I'm currently working on a project that involves Angular, Express, and UI-router for managing routes. While I've properly configured my $states and included the necessary Angular and UI-router libraries in my HTML file, I am facing an issue wher ...

Tokenizer method utilizing strings

Imagine a scenario where strings adhere to this specific format: id-string1-string2-string3.extension In this case, id, string1, string2, and string3 can all vary in length, with extension being a standard image extension type. To illustrate, here are a ...

Encountering a 401 error message with a 'truncated server' response while using Google Apps Script

I'm currently working on a code snippet that looks like this. function method3() { var spreadsheetID = '1BGi80ZBoChrMXGOyCbu2pn0ptIL6uve2ib62gV-db_o'; var sheetName = 'Form Responses 1'; var queryColumnLetterStart = ...

Executing multiple click events using JavaScript

I have recently started learning JavaScript and am experimenting with the following script: <script type="text/javascript"> $(document).ready (function() { $('#apply').click(function() { $('#applyinfo').toggle ...