Sometimes you have a click event on parent div as well as child elements of it. If you click on the child element, it automatically calls the parent click function along with its own function. This is called event bubbling. To restrict or stop this bubbling or propagation, we use stopPropagation method.
The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.
In the above code if we click outside the span,then callParent will be called. But if we click on the span, it will call ‘callChild’ and ‘callParent’ both because of the event propagation. So to avoid such condition, we would use event.stopPropagation.
In the above code, we have passed the $event parameter to both the functions. In Angular, ng-click scope exposes the $event property, which is the DOM event being propagated. While stopPropagation will help to stop the propagation of the event to the parent, event.preventDefault will stop the default action of the event from happening.