How to make the popup open on hover rather than on click in Angular leaflet

[svicki]

I want to open the popup in Angular Leaflet as a hover and not on click.

I have a markers array initialized and an overlay of a layer on top of the base layer.

I am trying to create a layer where buses and bus stops belong to each other. So each layer belongs to the same type in the overlays.

I am using the code

markers = []; markers.push( { layer : layername, lat : latitude, lng : longitude, message: busNames(data), icon :{....} } });

I have another push marker set on the same layer which builds busStop data.

Now how do I display the popups when mouse is moved over them as hover instead of showing them on click

P.S - I am new to coding and hence please help me with proceeding further.

[vladhilko]

First, you have to include 'leafletData' to your controller, after that add 'mouseover' and 'mouseout' events to your Marker.

angular
.module('myapp')
.controller("EventsController", [ '$scope', 'leafletData', function($scope, leafletData) {

  $scope.$on('leafletDirectiveMarker.mouseover', function(event, args){
      console.log('I am over!');
      var popup = L.popup({ offset: L.point(0, -28)})
                  .setLatLng([args.model.lat, args.model.lng])
                  .setContent(args.model.message)
      leafletData.getMap().then(function(map) {
         popup.openOn(map);
      });
  });

  $scope.$on('leafletDirectiveMarker.mouseout', function(event){
    leafletData.getMap().then(function(map) {
      map.closePopup();
    });
  });
}]);