Leaflet z index (polygons) - bringToFront

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<body>
<button onclick="bringToFront()">Bring to front</button>
<div id="map" ></div>
</body>

CSS

html, body, #map {
        margin: 0;
        width: 100%;
        height: 100%;
}

JavaScript

var map = new L.Map('map', {
                center: new L.LatLng(45.5 + 0.003,-73.5 + 0.003),
                zoom: 16,
               // markerZoomAnimation:false
            });

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

var polygon1 = L.polygon([
			[45.5        ,-73.5],
			[45.5 + 0.005,-73.5],
            [45.5 + 0.005,-73.5 + 0.005],
            [45.5        ,-73.5 + 0.005]
		], {color: 'red', fillColor: 'red', fillOpacity: 1});
var layer1 = L.featureGroup([polygon1]);
//layer1.addLayer(polygon1);
layer1.addTo(map);

var polygon2 = L.polygon([
			[45.5 + 0.002,-73.5 + 0.002],
			[45.5 + 0.007,-73.5 + 0.002],
            [45.5 + 0.007,-73.5 + 0.007],
            [45.5 + 0.002,-73.5 + 0.007]
		],  {color: 'blue', fillColor: 'blue', fillOpacity: 1});
var layer2 = L.featureGroup([polygon2]);
//layer1.addLayer(polygon2);
layer2.addTo(map);

window.bringToFront = function()
{
    debugger;
    layer1.bringToFront();
}