how do I access the L.marker methods (openPopup() in this case) on the leaflet-angular marker objects

I'd like to recreate what has been describe here by gwendall. In short : I want to figure out a way to print a popup for each marker with data from leaflet-angular marker objects. I am working with Ionic. I would like too to use an external html template so that I can customize look and feel of the popup.

Would you have any idea ? Thanks PS: the current map has clustering implemented

CONTROLLER.JS :

angular.module('wmapp.controllerRestaurant', [])
.controller('MapCtrl', function($scope, leafletEvents) {

var local_icons = {
            restaurantIcon: {
                iconUrl: 'img/restaurant_pointer_WMcustom_40x49_v3.png',
                shadowUrl: '',
                iconSize:     [40, 49], // size of the icon
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor    
                /*shadowSize:   [50, 64], // size of the shadow
                shadowAnchor: [4, 62],  // the same for the shadow*/
                },
            venueAllIcon: {
                iconUrl: 'img/restaurantBIS_pointer_WMcustom_40x49_v3.png',
                shadowUrl: '',
                iconSize:     [40, 49], // size of the icon
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
                /*shadowSize:   [50, 64], // size of the shadow
                shadowAnchor: [4, 62],  // the same for the shadow*/
            },
};


$scope.eventStatus = 'Map View';
angular.extend($scope, {
    defaults: {
        tileLayer: "http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png",
        maxZoom: 18,
        path: {
            weight: 10,
            color: '#800000',
            opacity: 1
        }
    },
    center: { // auto-geolocation will only work is <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> is set in the AndroidManifest.xml file
        autoDiscover: true
    },
    Paris: {
                lat: 48.85,
                lng: 2.33,
                zoom: 8
    },
    markers: {

                MAK002: {
                    group: 'Paris',
                    lat: 48.829102,
                    lng: 2.327705,
                    title: "Marker",
                    icon: local_icons.restaurantIcon,
                },

                MAK003: {
                    group: 'Paris',
                    lat: 48.8295,
                    lng: 2.327705,
                    title: "Marker",
                    icon: local_icons.restaurantIcon,
                },

                //more object ( apx 700)
    },  
});


});

var showPopup = function(marker_id) {

 var marker = $scope.markers[marker_id],
  content = marker.title,
  latLng = [marker.lat, marker.lng],
  popup = L.popup({ className : 'custom-popup'       }).setContent(content).setLatLng(latLng);

 leafletData.getMap().then(function(map) {
  popup.openOn(map);
});

}

and html :

            <div  class="rest_map_container" ng-controller="MapCtrl" > <!-- -->
                <div  data-tap-disabled="true"   >
                    <leaflet defaults="defaults" markers="markers" center="center"  style="width: 100%; height: 470px;">
                    </leaflet>

            </div>