Bring a Marker to Front in Leaflet

<!DOCTYPE html>
<html ng-app="demoapp">

  <head>
    <link data-require="leaflet@0.7.3" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
    <link rel="stylesheet" href="https://rawgit.com/Leaflet/Leaflet.label/master/dist/leaflet.label.css" />
    <script data-require="leaflet@0.7.3" data-semver="0.7.3" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
    <script src="https://rawgit.com/Leaflet/Leaflet.label/master/dist/leaflet.label.js"></script>
    <script src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8" data-require="angularjs@1.4.8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-leaflet-directive/0.10.0/angular-leaflet-directive.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MapController">
      <leaflet lf-center="center" markers="markers" width="100%" height="480px"></leaflet>
  </body>

</html>

var app = angular.module('demoapp', ['leaflet-directive']);
app.controller('MapController', ['$scope', function($scope) {
    $scope.center = {
        lat: 46.119944,
        lng: 14.815333,
        zoom: 8
    };
    $scope.markers = {
        jesenice: {
            lat: 46.4367,
            lng: 14.0526,
            riseOnHover: true,
            label: {
                message: 'Jesenice',
                options: {
                    clickable: true,
                    noHide: true,
                    markerName: 'jesenice'
                }
            }
        },
        hrusica: {
            lat: 46.4489,
            lng: 14.0113,
            riseOnHover: true,
            label: {
                message: 'Hrušica',
                options: {
                    clickable: true,
                    noHide: true,
                    markerName: 'hrusica'
                }
            }
        },
        koroskaBela: {
            lat: 46.4262,
            lng: 14.0988,
            riseOnHover: true,
            label: {
                message: 'Koroška Bela',
                options: {
                    clickable: true,
                    noHide: true,
                    markerName: 'koroskaBela'
                }
            }
        },
        blejskaDobrava: {
            lat: 46.4077,
            lng: 14.0989,
            riseOnHover: true,
            label: {
                message: 'Blejska Dobrava',
                options: {
                    clickable: true,
                    noHide: true,
                    markerName: 'blejskaDobrava'
                }
            }
        }
    };

    $scope.selectedMarker = null;
    $scope.$watch('selectedMarker', function(newVal, oldVal) {
        if (oldVal !== null) {
            $scope.markers[oldVal].zIndexOffset = 0;
        }
        if (newVal !== null) {
            $scope.markers[newVal].zIndexOffset = 100;
        }
    });

    $scope.$on('leafletDirectiveMarker.click', function(event, args) {
        $scope.selectedMarker = args.modelName;
    })
    $scope.$on('leafletDirectiveLabel.click', function(event, args) {
        $scope.selectedMarker = args.leafletObject.options.markerName;
    })
}]);

/* Styles go here */

[Blogpost](http://www.damirscorner.com/blog/posts/20160123-BringingAMarkerToFrontInLeaflet.html) sample code.