Angular Leaflet Search control event - angularjs

Question

I have an AngularJS application and I'm currently trying to access the "search_expanded" event of Leaflet Search control but having no luck.
Here's my code:
angular.module('myApp', [ 'leaflet-directive' ])
.controller('ShowMapCtrl', ["$scope", "leafletData", function ($scope, leafletData) {
// some code
leafletData.getMap().then(function(map) {
map.on('search_expanded', function(e){
alert("search control expannded");
});
});

Answer 1

The search_expanded event, and all the other events supported by L.Control.Search are fired on the actual control instance not on the map instance as you can see in the following example:
var controlSearch = new L.Control.Search({
layer: new L.LayerGroup()
}).on('search_expanded', function () {
console.log('search_expanded!')
}).addTo(map);
http://plnkr.co/edit/njeXYb4PfbaG3hppcgmO?p=preview

Answer 2

First off I would try to throw some exception handling in there:
leafletData.getMap().then(function(map) {
map.on('search_expanded', function(e){
alert("search control expannded");
}, function(reason) {
alert('Failed: ' + reason);
});
Also, instead of alert, I prefer to use console.log() especially with Angular applications.
leafletData.getMap().then(function(map) {
map.on('search_expanded', function(e){
console.log("search control expannded");
}, function(reason) {
console.log('Failed: ' + reason);
});

Answer 3

I came up with a sloppy workaround since the directive won't allow me to catch the search control events.
var expanded = false;
$scope.$on('leafletDirectiveMap.layeradd', function(){
$('input.search-input').focus(function(){
expanded = !expanded;
if(expanded)
{
console.log("search control expanded");
}
});
});