AngularJS ng-click not firing using angular-google-maps' windows

I wanted to automatically center the map to the user's location once loaded so I used $scope.$apply() once geolocation is loaded as seen in my TestCtrl in controller.js here:

$scope.drawMap = function(position) {                                
        $scope.$apply(function() {
        $scope.myLocation.lng = position.coords.longitude;
        $scope.myLocation.lat = position.coords.latitude;

        $scope.map = {
            center: {
                latitude: $scope.myLocation.lat,
                longitude: $scope.myLocation.lng
            },
            zoom: 14,
            events: {
                click: $scope.clickCallback
            }
        };                          
    });
};

navigator.geolocation.getCurrentPosition($scope.drawMap);

$scope.test = function(){
    alert("hola");
};

The $scope.clickCallback is used to push new markers to the map on click event.

// inside TestCtrl
var markers = [], counter = 1;
$scope.clickCallback = function(map, eventName, event){                        
    var lat = event[0].latLng.lat();
    var lng = event[0].latLng.lng();

    markers.push(createNewMarker(counter, lat, lng));        

    $scope.$apply(function(){
        $scope.newMarker = markers;           
    });       
    counter++;            
};

As you can see, there's another $scope.$apply there to apply the new marker/s.

The createNewMarker() is where the markers (ui-gmap-markers) models is defined.

// still inside TestCtrl
var createNewMarker = function(i, lat, lng, idKey) {

    if (idKey == null) {
        idKey = "id";
    }
    var foo = "<h4>New Marker</h4><form><input type='text' placeholder='Event name' name='name'></input> <input type='button' value='submit'></input><input type='button' ng-click='test()' value='Delete marker'></input></form>";
    var bar = $compile(foo)($scope);
    var ret = {
        latitude: lat,
        longitude: lng,            
        show: true,
        options: {
            draggable: true,
            animation: google.maps.Animation.DROP,
        },            
        windows: {
            title: "New Marker",
        },
        windowsOptions: {     
           content: foo,
        }
    };
    ret[idKey] = i;
    return ret;
};

Now the marker is showing fine when I click on the map including the window, but when I click on the Delete marker button, my $scope.test() function isn't firing up. I tried using $compile but it returns a bunch of error about $scope.

Here's my template:

<ion-content scroll="false">
  <ui-gmap-google-map center='map.center' zoom='map.zoom' bounds="map.bounds" events="map.events">
    <ui-gmap-markers models="newMarker" coords="'self'" icon="'icon'" options="'options'">
      <ui-gmap-windows show="show" options="'windowsOptions'">
      </ui-gmap-windows>
    </ui-gmap-markers>
  </ui-gmap-google-map>
</ion-content>

Anyone familiar with this scenario? I'm using Ionic Framework btw.