Capture hide event in $modal of angular strap - angularjs

Question

I am using angular Strap to create a modal like :
$modal({
template : "/templ/alert-with-title.html",
content : content,
title : title,
show : true,
backdrop : true,
placement : 'center'
});
I have the written the following :
$scope.$on("modal.hide.before",function() {
console.log("Closing1");
});
$scope.$on("modal.hide",function() {
console.log("Closin2");
});
My /templ/alert-with-title.html is like this :
<div aria-hidden="true" aria-labelledby="windowTitleLabel" role="dialog"
tabindex="-1" class="modal hide fade in modal" id="">
<div class="modal-header">
<a class="fui-cross pull-right" ng-click="$hide()"></a>
<h3 ng-bind="title"></h3>
</div>
<div class="modal-body">
<div class="divDialogElements" >
<span ng-bind="content"></span>
</div>
</div>
<div class="modal-footer">
<div>
<button type="button" ng-click="$hide()"
class="btn btn-default btn-gray-l gray pull-left mar_t-4">OK</button>
</div>
</div>
</div>
However even after all this, I get no console logs when i click Ok. Why is this?

Answer 1

so the solution is very simple, I had to provide the scope to the $modal.
$modal({
template : "/templ/alert-with-title.html",
content : content,
title : title,
show : true,
backdrop : true,
placement : 'center',
scope : $scope
});
But what I do not understand that why for an event that is "$emit" , $on of the outside scope would not work

Answer 2

$emit and $broadcast are angular event handling mechanisms are distinct from events that are found in pure JavaScript. The latter traverse the DOM of your web page. the $event in angular traverses the scope hierarchy present in your module. With that being said here is an excerpt from the source code of angular-strap modal :
function ModalFactory(config) {
var $modal = {};
// Common vars
var options = $modal.$options = angular.extend({}, defaults, config);
var promise = $modal.$promise = $bsCompiler.compile(options);
var scope = $modal.$scope = options.scope && options.scope.$new() || $rootScope.$new();
the parameters you pass as the argument for your $modal service is the config object. the default object contains the default values for the parameters. The line of interest is the last line .
There it checks wether you have provided a scope object as one of the parameters. If so then a child of that scope is created via scope.$new. Else it creates a scope which is the child of the top most scope in the heirarchy.
Therfore any events which are bubbled up via $emit, from this particular scope can only be caught by the $rootScope.
In the code you posted in the question you did not provide any scope object in the parameters. Hence a child of the $rootScope is created, not of the current $scope you were working in. In the second code you posted , a child scope of your current $scope is created. That is the reason why you are able to handle the 'model.hide' and other events from your current $scope
Hope this helps :)