Calling a function from an angularjs controller using dynamically created HTML

Question

I'm using the Google Maps API to create a list of map markers for addresses returned by my API. I want the infowindow to have a button that calls a function from the controller, but for some reason, ng-click isn't doing anything at all.

I've tried using $compile, but haven't had any luck. Here's what my controller looks like:

    drivingApp.controller('MapController', ['$resource', '$scope', '$window', '$http', '$compile', function($resource, $scope, $window, $http, $compile) {
    $scope.testPrint = function () {
        console.log('Test')
    };
    $scope.initMap = function () {
        console.log(sessionStorage.getItem('user-token'));
        $http.defaults.headers.common['Authorization'] = 'JWT ' + sessionStorage.getItem('user-token');
        $http.get('my_api_url') // Request currently available properties
            .then(function (response) {
                $scope.allPropertyList = response.data; // Put server response in scope
                var mapCenter = {lat: 29.3568, lng: -98.494738}; // Center the map in the middle of the city

                var map = new google.maps.Map(document.getElementById('map'), {
                    center: mapCenter,
                    zoom: 9
                });

                var marker, i;

                for (i = 0; i < $scope.allPropertyList.length; i++) {
                    // Get latitude and longitude for each property returned by the API
                    var latitude = parseFloat($scope.allPropertyList[i]['property_latitude']);
                    var longitude = parseFloat($scope.allPropertyList[i]['property_longitude']);
                    var property_address = $scope.allPropertyList[i]['property_address'];
                    /*
                    Create content for the info window of the map marker.
                    Allow the user to select properties from the map itself.
                    */

                    var contentString = '<h1 style="font-size: 18px">' + property_address + '</h1>'
                                        +'<div>'
                                        +'<a id="selectFromMapButton" ng-click="testPrint()" class="c-btn" style="color: white">Select Property</a>'
                                        +'</div>';
                    $compile(contentString)($scope);
                    createMarker(i);

                }

                function createMarker(i) {
                    var marker = new google.maps.Marker({
                        map: map,
                        position: new google.maps.LatLng(latitude, longitude),
                    });


                    var infowindow = new google.maps.InfoWindow({
                        content: contentString
                    });
                    google.maps.event.addListener(marker, 'click', function() {
                        infowindow.open(map,marker);
                    });
                }

            });
    };

}]);

I want to call testPrint by clicking on the info window of the map markers. How can I achieve this?

Answer 1

Let me know if this works. I changed some of the map logic in the for loop and removed the createMarker function for simplicity. You should be able to add it back in if you want.

for (i = 0; i < $scope.allPropertyList.length; i++) {
    // Get latitude and longitude for each property returned by the API
    var latitude = parseFloat($scope.allPropertyList[i]['property_latitude']);
    var longitude = parseFloat($scope.allPropertyList[i]['property_longitude']);
    var property_address = $scope.allPropertyList[i]['property_address'];
    /*
    Create content for the info window of the map marker.
    Allow the user to select properties from the map itself.
    */

    // Add the marker
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(latitude , longitude),
        map: $scope.map
    });

    // Build the content string
    var contentString = '<h1 style="font-size: 18px">' + property_address + '</h1>'
                        +'<div>'
                        +'<a id="selectFromMapButton" ng-click="testPrint()" class="c-btn" style="color: white">Select Property</a>'
                        +'</div>';
    // Compile the contentString
    var compiledContent = $compile(contentString)($scope)

    var infowindow = new google.maps.InfoWindow({
        content: ''
    });

    // Add the event listener and open info window.
    google.maps.event.addListener(marker, 'click', (function(marker, contentString, scope, infowindow) {
        return function() {
            infowindow.setContent(contentString);
            infowindow.open(scope.map, marker);
        };
    })(marker, compiledContent[0], $scope, infowindow));
}