如何在Angular页面中显示一个非$scope变量?

我试图使用角添加对象属性到页面，但我创建的属性不是$scope变量。我的对象不是$scope对象的原因是我使用了google maps API(我知道我应该使用一个与Angular兼容的对象…现在，但我想看看我是否可以绕过由于时间紧张，我已经有其他一切正常工作)。我已经制作了markers，他们点击ajax call以获取marker的数据，然后我想在我的模态上显示。我尝试了一些关于$watch的另一个帖子的建议来检查变化，但我似乎是错误的，因为它只在应用程序开始时运行一次，然后当模态对象改变时，它什么也不做。代码如下:

在我的Angular模块外:

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，这样我就可以使用Angular将它注入我的模态。程序开始时的$scope.modal console.logs undefined，然后当我的标记被单击并且模态对象发生变化时，没有其他内容。任何帮助将非常感激!