Within my MainController, I have implemented some basic GoogleMaps API Javascript functionality. The specific area causing me confusion is the $scope.clock, an AngularJS element located within the main.html page:
<div><h5>{{clock}}</h5></div>This element is initially set inside the constructor and then updated when the event bounds_changed is triggered (found at the bottom of the code snippet).
However, there are two aspects that I am struggling to comprehend:
- Why does the
console.log($scope)display$scope.clock = 'Bye Bye'before the value actually changes from'Hi'to'Bye Bye'? Shouldn't it log$scope.clock = 'Hi'first? Why does the
not reflect the updated value of<div><h5>{{clock}}</h5></div>'Bye Bye', but instead continue to show the initial value of'Hi'upon initialization?class MainController { constructor($http, $scope, $timeout, socket) { var $this = this; $scope.clock = 'Hi'; $this.doSomething($this, $scope, 'Hi'); } doSomething = function ($this, $scope, smth) { $this.initialiseMap($this, $scope, $timeout); }; initialiseMap = function ($this, $scope, $timeout) { // Utilize AngularJS’s timer service $timeout with a 100ms delay before initializing the map $timeout(function(){ // Initialize the Google map $scope.map = new google.maps.Map(document.getElementById('map'), { zoom: 11 , center: { lat: -33.8675 , lng: 151.2070 } }); // Initialize the Geocoder var geocoder = new google.maps.Geocoder; // Initialize Searchbox: Create the search box and connect it to the UI element. $scope.input = document.getElementById('pacinput'); $scope.searchBox = new google.maps.places.SearchBox($scope.input); $scope.map.controls[google.maps.ControlPosition.TOP_LEFT].push($scope.input); // Searchbox: Adjust SearchBox results based on current map's viewport. $scope.map.addListener('bounds_changed', function () {$scope.searchBox.setBounds($scope.map.getBounds()); console.log($scope); $scope.clock = 'Bye Bye';}); // Issue where clock value doesn't update on HTML page! },100); }; }