I can use Angular scope function inside of JavaScript, but not HTML inside the JavaScript

Question

I have some JavaScript that is interfacing with Google Maps. I have not included all the code to keep this short, but lets say there is a loop that will put a marker on the Google Map for each event there is in an events database. Clicking a marker will bring up an infoWindow and display info about that specific event. I can confirm that everything up to this point works.

Additionally, I am pulling the scope of an Angular controller into the DOM, so I can call some functions from this controller (I do not know if this is the correct terminology). I can confirm that this works too. I am calling the sayHello() function from the controller, and 'hello' is printed in the console every time I click a marker.

Here is the code:

var g = angular.element(document.querySelector('[ng-controller="SignupController"]')).scope();
g.sayHello();

// display info about the event in an infowindow
infoWindow.setContent(
"Instructor Name: " + marker.instructorName + 
"<br /> Instructor Email: " + marker.instructorEmail + 
"<br /> Instructor Rating: " + marker.instructorRating + showMe + 
"<br /> <br /> Event Name: " + marker.name + 
"<br /> Event Description: " + marker.description + 
"<br /> Available Spaces: " + marker.spaces + 
"<br /> <br /> Address: " + marker.address + "&emsp;" + marker.city + ", " + marker.state + "&emsp;" + marker.zip + 
 "<br /> Location Type: " + marker.locationType + 
 "<br /> <br /> Time: " + marker.startTime + " - " + marker.endTime + 
 "<br /> Tags: " + marker.tags + 
 "<br /> <br /> Distance from you (straight line): " + marker.distance + " miles" + 
 "<br /> <br /> Price: $" + marker.price + 
 "<br />" + "<button ng-click='g.sayHello();' class='btn btn-primary'>Say Hello</button>");

I am having trouble with the last line of this code. I am already executing the function from the controller before the infoWindow code, and it behaves correctly. However, I would like the function to execute in the info window when I click a button. I have included this button in the infoWindow, but nothing happens when I click the button. I would like to figure this out so I can add buttons that will create PayPal and credit card payments.

Here is the code from my controller:

app.controller('SignupController', ['$scope', 'UserFactory', 'Share', function($scope, UserFactory, Share) {

  $scope.sayHello = function() {
    console.log('hello!');
  };

  ............

Can anyone tell me what I am doing wrong, or how to correctly solve this problem?

Thank you for your time.

Answer 1

I was able to solve my problem via the selected answer in this question:

Answer