Angular Leaflet map error

I'm using Angular in a project with Codeigniter and I'm applying the Leaflet map. Creating the function, it generates the map, but it informs error when obtaining the center property and does not load in the defined position of initialization, it follows code and images:

    var app = angular.module('myApp', ['ngMaterial','ngMessages','perfectParallax', 'leaflet-directive'])
    .controller('MyController', ['$scope','$http', function ($scope, $http) {
        $scope.url_base = location.href.substring(0,location.href.lastIndexOf('/') + 1);
        //console.log($scope.url_base);

        $scope.mapa = function(){
         var mainMarker = {
            lat: -27.0990815,
            lng: -52.6113324,
            focus: true,
            message: "AngelLira",
            draggable: false
        };
        angular.extend($scope, {
            center: {
                lat: -15.25241,
                lng: -52.21115241,
                zoom: 4
            },
            markers: {
                mainMarker: angular.copy(mainMarker)
            },
            position: {
                lat: -27.0990815,
                lng: -52.6113324
            },
            defaults: {
                tileLayer: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                zoomControlPosition: 'topright',
                tileLayerOptions: {
                    opacity: 0.9,
                    detectRetina: true,
                    reuseTiles: true,
                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy <a href="http://www.openstreetmap.org/copyright">AngelLira</a>',
                },
                scrollWheelZoom: false,
                minZoom: 3,
                worldCopyJump: true
            }
        })
    };
}]);

Div where is the map:

<leaflet ng-init="mapa()" lf-center="center" controls="controls" defaults="defaults"  markers="markers" width="100%" height="450px"></leaflet>

Error returned in console:

[AngularJS - Leaflet] The "center" property is not defined in the main scope

But it is coming through the extend within the function.

Has anyone ever had this problem?

Unfortunately, I can not use Google Maps.

In addition to this Leaflef does anyone recommend another free maps?