ng-click with $compile in info windows not working

Question

Hi i use google maps in my angular app. I need to set button (add to cart) in info window, do add articles selectet from map (markers). I added $compile but ng-click still not working. Trying find solution on google but still same problem. Here is my ctrl, with html and button "addToCart()". I try to make plunker, but my app have many piece, and its very complicated to make working plunker, sry and thnx

 marker.content = '<div class="iw-container" style="color: #000;"><button type="button" on-click="addToCart(info)">Add to cart</button>'
                    +
                    '<div class="iw-content">'
                    +
                    '<b>'
                    +
                    'Serial number: '
                    +
                    '</b>'
                    +
                    info.serial_n
                    +
                    '</div>'
                    +
                    '<div class="iw-content">'
                    + '<b>'
                    +
                    'Description: '
                    +
                    '</b>'
                    +
                    info.desc
                    +
                    '<b>'
                    +
                    '</div>'
                    +
                    '<div class="iw-content">'
                    +
                    'Last report: '
                    +
                    '</b>'
                    +
                    info.last_report
                    +
                    '<b>'
                    +
                    '</div>'
                    +
                    '<div class="iw-content">'
                    +
                    'Created: '
                    +
                    '</b>'
                    +
                    info.created_at
                    +
                    '</div>'
                    +
                    '<div class="iw-content">'
                    +
                    '<img border="0" float="left" src="">'
                    +
                    '<img border="0" float="right" src="">'
                    +
                    '</div>'
                    +
                    '</div>';
            var compiled = $compile(marker.content)($scope);
            var infoWindow = new google.maps.InfoWindow({
      content: compiled[0]
    });
    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.setContent(this.content);
        infoWindow.open($scope.map, marker);
    });
    $scope.markers.push(marker);
}

Answer 1

The way the button is declared looks invalid, at least object info could not be passed into function like specified. Try to change the button declaration from:

<button type="button" on-click="addToCart(info)">Add to cart</button>

to:

<button type="button" ng-click="addToCart(' + i + ')">Add to cart</button>

Note: in my case item index is passed instead of item object to event handler

Working example

angular.module('mapApp', [])
    .controller('mapCtrl', function ($scope, $rootScope, $compile) {


        function initialize() {

            $scope.map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: { lat: -38.363, lng: 131.044 }
            });
            var infoBox = document.getElementById("shoppingCartInfo");
            $scope.map.controls[google.maps.ControlPosition.TOP_CENTER].push(infoBox);


            $scope.items = [
                { title: 'Item A', lat: -33.873033, lng: 151.231397 },
                { title: 'Item B', lat: -37.812228, lng: 144.968355 }
            ];


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


            for (var i = 0; i < $scope.items.length; i++) {

                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng($scope.items[i].lat, $scope.items[i].lng),
                    map: $scope.map,
                    title: $scope.items[i].title
                });

                var content = '<button type="button" ng-click="addToCart(' + i + ')">Add to cart</button>';
                var compiledContent = $compile(content)($scope)

                google.maps.event.addListener(marker, 'click', (function (marker, content, scope) {
                    return function () {
                        scope.infowindow.setContent(content);
                        scope.infowindow.open(scope.map, marker);
                    };
                })(marker, compiledContent[0], $scope));

            }

        }

        $scope.addToCart = function (index) {
            var item = $scope.items[index];
             var box = angular.element(document.getElementById("shoppingCartInfo"));
             box.append(item.title + " has been added"); 
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    });

html, body {
        height: 400px;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 400px;
      }

      #shoppingCartInfo{
            width: 240px;
            height: 40px;
            background-color: wheat;
            margin-bottom: 22px;
            display: block;
            position: relative;
      }

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css" />
<div ng-app="mapApp" ng-controller="mapCtrl"> 
    
    <div id="shoppingCartInfo"></div>
    <div id="map">
        
    </div>   
</div>