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.

Lets take a simple example:
 

<a href="" ng-click=callParent()>
    <span class="glyphicon glyphicon-ban-circle" ng-click=callChild($event)></span>
</a>

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.
 

$scope.callChild = function($event) {
    // do something else
    $event.stopPropagation();
    $event.preventDefault();
};

 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.

You can use these events simply like this or by creating a directive and attach it to the click where you need it. You can refer to following site:-
http://benohead.com/angularjs-stopping-event-propagation-on-ng-click/