I have this MainController which handles some basic GoogleMaps API Javascript. The bit I am stuck with, is $scope.clock, which is an AngularJS element somewhere in the main.html page: <div><h5>{{clock}}</h5></div>.

It is first initialized inside the constructor and updated once the event bounds_changed is triggered (bottom of the code).

Now what I don't understand are the two following things:

• Why does console.log($scope) show $scope.clock = 'Bye Bye' before $scope.clock is updated with 'Bye Bye'? Shouldn't it be $scope.clock = 'Hi'?

• Why doesn't the <div><h5>{{clock}}</h5></div> element get updated with 'Bye Bye', but it still displays the old value 'Hi' from the 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) {
      // Use AngularJS’s timer service $timeout and put a delay of 100ms before the map’s initialization  
      $timeout(function(){
          // Initialise the Google map
          $scope.map = new google.maps.Map(document.getElementById('map'), {
              zoom: 11
              , center: {
                  lat: -33.8675
                  , lng: 151.2070
              }
          });
          // Initialise the Geocoder
          var geocoder = new google.maps.Geocoder;
         // Initialise Searchbox: Create the search box and link 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: Bias the SearchBox results towards current map's viewport.
        $scope.map.addListener('bounds_changed', function () {$scope.searchBox.setBounds($scope.map.getBounds());
            console.log($scope);
            $scope.clock = 'Bye Bye';}); // clock does not get updated in the HTML page!
      },100);
  };
  }