Angular Leaflet map refresh - angularjs

Question

I have a leaflet map that shows a company stores arround the country and a form that i can use to filter the stores by state, but when i change de state, i re-call the map but it doesn't refresh the markers. How can i do this? I'm using Angular Leaflet. The function that return the positions works, but the markers doesn't change. Below there is my code:
$http.get(url_sistema + 'mapaFiltro/'+estado).then(function(response) {
var local_icons = {
default_icon: {
iconUrl: url_sistema+'web_files/img/marker.png',
iconSize: [35,50],
iconAnchor: [18, 50]
}
};
angular.extend($scope, {
icons: local_icons,
center: {
lat: -20.0990815,
lng: -52.6113324,
zoom: 4
},
markers: [],
defaults: {
tileLayer: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
zoomControlPosition: 'topright',
tileLayerOptions: {
opacity: 0.9,
detectRetina: true,
reuseTiles: true,
attribution: '© OpenStreetMap | &copy AngelLira',
},
scrollWheelZoom: false,
minZoom: 2,
worldCopyJump: true
}
});
for (var i = 0; i < response.data.dados_mapa.length; i++) {
$scope.markers.push(
{
'lat': response.data.dados_mapa[i].latitude,
'lng': response.data.dados_mapa[i].longitude,
'focus': false,
'message':
'<div class="logo_mapa">'+
'<img src="web_files/img/logo_mapa.png">'+
'</div>'+
'<div class="texto_mapa">'+
'<h1>'+response.data.dados_mapa[i].titulo+'</h1>'+
'<h2>'+response.data.dados_mapa[i].telefones+'</h2>'+
'<h2>'+response.data.dados_mapa[i].email+'</h2>'+
'<p>'+response.data.dados_mapa[i].endereco+'</p>'+
'</div>'
,
'draggable': false,
'icon': local_icons.default_icon
}
);
}
}, function(error) {
});
The response of my request are the new markers, that should me showing in the map.

Answer 1

Add this partial code after your for loop of push markers:
leafletData.getMap().then(function(map) {
setTimeout(function() {
map.invalidateSize();
map._resetView(map.getCenter(), map.getZoom(), true);
}, 200);
});
In additionally, you need inject leafletData to controller.