angular-leaflet-directive add rectangle around marker

Question

I have leaflet map with a marker. On the side I have a form where I can specify the extent (in metres) of the square box that I would like to show on the map upon submitting the form.

I tried to replicate the example reported here http://leafletjs.com/reference.html#rectangle in angular but it does not work.

// define rectangle geographical bounds
var extent = 100; // metres
var bounds = [
    [markerLat-extent/2, markerLon-extent/2], 
    [markerLat+extent/2, markerLon+extent/2]
];

var map = leafletData.getMap('mymap');

// create an orange rectangle
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);

I believe I am making a number of mistakes. First of all, the lat/lon in the bounds should not mix with the extent expressed in metres. Secondly, I get a "t.addLayer is not a function" error.

This is what I do in the Angular controller to get the map up and running:

angular.extend($scope, {
    center : {
        lat: latitudeUK,
        lng: longitudeUK,
        zoom: 5
    },
    defaults: {
        scrollWheelZoom: false
    },
    tiles: {
        url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        options: {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }
    },
    markers: {
        pin: {
            lat: startMarkerLatitude,
            lng: startMarkerLongitude,
            message: "Drag me to change center of the rectangle",
                focus: true,
                draggable: true
            }
        }
    }
);

$scope.controls = {
    scale: {
        position: 'topleft',
        metric: true
    }
};

In the html page I have this simple call:

<leaflet id="mymap" center="center" controls="controls" tiles="tiles" markers="markers"></leaflet>

What am I missing? Thank you for your suggestions!

-- UPDATE --

I managed to add shapes to the map. In the case of a circle I can do the following:

leafletData.getMap('mymap').then(function(map) {

    // Circle
    var circleLocation = new L.LatLng(markerLat, markerLon);
    var circleOptions = {
        color: 'blue'
    };
    var shape = new L.Circle(circleLocation, extent, circleOptions);
    map.addLayer(newShape);
});

What I cannot still do is to add a rectangle given its centre and the length of the sides correctly. It looks like the problem is when computing the bounding box of the rectangle.

I posted the question as a stand-alone one here, so it might be useful to check that question too.