Как вы можете показать переменную не $ scope на странице в Angular?

Я пытаюсь добавить свойства объектов на страницу с помощью углового, но созданное мной свойство не является переменной $scope. Причина, по которой мой объект не является объектом $scope связан с использованием google maps API (я знаю, что я должен использовать тот, который совместим с Angular... теперь, но я хотел бы видеть, могу ли я обойти это из-за к краху времени, и у меня уже есть все, что работает правильно). Я сделал markers и они делают ajax call по щелчку, чтобы получить данные для marker, которые я тогда хочу показать на моем модальном. Я попробовал несколько предложений из другого сообщения о $watch чтобы проверить изменения, но я, кажется, неправильно его реализую, потому что он работает только один раз в начале приложения, а затем, когда модальный объект изменен, он ничего не делает. Код выглядит следующим образом:

Вне моего модуля:

var modal = {};

function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 28.5383, lng: -81.3792},
      scrollwheel: false,
      zoom: 15
    });
    var infoWindow = new google.maps.InfoWindow({map: map});

    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;

        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        infoWindow.setPosition(pos);
        infoWindow.setContent('You are here!');
        map.setCenter(pos);

        for (i = 0; i < globalDiscoveries.length; i++) {
            var marker = new google.maps.Marker({
                position: globalDiscoveries[i].location,
                map: map,
                title: globalDiscoveries[i].name,
                icon: {
                    url: globalDiscoveries[i].image, // url
                    scaledSize: new google.maps.Size(50, 50), // scaled size
                    origin: new google.maps.Point(0,0), // origin
                    anchor: new google.maps.Point(0, 0) // anchor
                },
                custom_param: globalDiscoveries[i].image
            });

            marker.addListener('click', function() {
                var image = marker.custom_param;

                $.post('/findImage', {image: image}, function(data) {
                    console.log(data);
                    modal.image = data[0].image;
                    modal.name = data[0].name;
                    modal.description = data[0].description;
                    modal.discoveredOn = data[0].discoveredOn;
                    console.log(modal);
                });

                $('#myModal').modal('show');
            });
        }

      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  }

  function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
                          'Error: The Geolocation service failed.' :
                          'Error: Your browser doesn\'t support geolocation.');
  }

код внутри модуля с угловым модулем (который относится к этой проблеме):

$scope.modal = $scope.$watch(angular.bind(this, function (modal) {
        return this.modal;
    }), function (newVal, oldVal) {
        console.log('modal changed to ' + newVal);
    });

$scope.modal что я $scope.modal сохранить модальный объект (при изменении) в $scope.modal поэтому я могу использовать Angular, чтобы ввести его в мой модальный. $scope.modal console.logs undefined в начале программы, а затем ничего больше, когда меняют маркеры и изменяется модальный объект. Любая помощь будет принята с благодарностью!