how to add a rectangle on an ui-leaflet map in angular1 programmatically

Question

in HTML my map is defnied as this

<leaflet bounds="map.spatial_bounds_card" layers="map.layers_card" height="200px" ></leaflet>

in the controller, I expand the angular scope, to define bounds and layers. I dont know how to access the leaflet map, in order to add OverlayItems to it. Currently I have created a rectangle, but its not shown on the map.

function Ctrl($scope, leafletBoundsHelpers, leafletDrawEvents) {
    var drawnItems2 = new L.FeatureGroup();
    angular.extend($scope, {
        map: {
            spatial_bounds_card: {},
            layers_card: {
                baselayers: {
                    osm: {
                        name: 'OpenStreetMap',
                        url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                        type: 'xyz'
                    }
                }
            },
            drawOptions: {
                position: "bottomright",
                draw: {
                    polyline: false,
                    polygon: false,
                    circle: false,
                    rectangle: {
                        metric: false,
                        showArea: true,
                        shapeOptions: {
                            color: 'blue'
                        }
                    },
                    marker: false
                },
                edit: {
                    featureGroup: drawnItems2,
                    remove: false
                }
            },
            defaults: {
                scrollWheelZoom: false
            }
        }
    });
    var bb = L.latLngBounds($scope.filters.spatial.params.southwest, $scope.filters.spatial.params.northeast);
    console.log(bb);
    var selectedBoundingBox = new L.rectangle(bb,
            {
                color: 'blue'
            });
    selectedBoundingBox.addTo($scope.map); // <-- error here
}

I do get this error when running the code:

angular.js:13920 TypeError: t.addLayer is not a function
    at e.addTo (leaflet.js:7)
    at new FilterSpatialCardCtrl (filter_spatial_card.controller.js:50)
    at Object.invoke (angular.js:4718)
    at $controllerInit (angular.js:10354)
    at nodeLinkFn (angular.js:9263)
    at angular.js:9673
    at processQueue (angular.js:16383)
    at angular.js:16399
    at Scope.$eval (angular.js:17682)
    at Scope.$digest (angular.js:17495)

Answer 1

In your code there is over head, extra parameters too. Make it as simple as possible.

like:

angular.extend($scope, {
    center: {
            lat: 54.559322,
            lng: -5.767822,
            zoom: 14
    },
        defaults: {
            maxZoom: 25,
            minZoom: 1,
            path: {
                weight: 10,
                color: '#800000',
                opacity: 1
            }
        }
});

    var markersFeatureGroup = new L.FeatureGroup();
leafletData.getMap()
.then(function(map) {
    var latlang = L.latLng(50.5, 30.5);
    var circleobj = L.rectangle([[54.559322, -5.767822], [54.560900, -5.760000]],{
    color: 'blue'
        }).bindLabel("Hello World", { direction: 'bottom', clickable: "interactive" });//use left, left, auto, 
  markersFeatureGroup.addLayer(circleobj);
  map.addLayer(markersFeatureGroup);
});

Refer Jsfiddle for more information : http://jsfiddle.net/nidhiarya1245/5hukx0g5/