Robert Prine Robert Prine - 1 month ago 8
AngularJS Question

How can you show a non-$scope variable on a page in Angular?

I am attempting to add an objects properties to a page using angular, but the property I created is not a

variable. The reason my object isn't a
object is due to me using
google maps API
(I know I should be using one that is compatible with, but I would like to see if I can get around that due to time crunch and I already have everything else working correctly). I have made
and they make an
ajax call
on click to get data for the
, which I then want to show on my modal. I have tried a few suggestions from another post about
to check for a change, but I seem to be implementing it wrong because it only runs once at the beginning of the application and then when the modal object is changed it does nothing. The code is as follows:

Outside of my Angular module:

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.setContent('You are here!');

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) {
modal.image = data[0].image; = data[0].name;
modal.description = data[0].description;
modal.discoveredOn = data[0].discoveredOn;


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

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

code within Angular module (that pertains to this problem):

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

To recap, I am attempting to save the modal object (on change) to
so I can use Angular to inject it into my modal. The
console.logs undefined
at the beginning of the program and then nothing else when my markers are clicked and the modal object changes. Any help would be greatly appreciated!


You have defined modal like this

var modal = {};

So, it is an gloabl variable.

You can access it in angular as it is global.

In angular,you can do like this.

$scope.modal = modal;

Now put $watch on it.


    console.log(newVal); //here you can get new modal value;