Uma característica de alguns tipos de eventos no javascript é a propagação do mesmo dos elementos filhos para os pais. Alguns conhecem pelo termo efeito bubbling.
E para prevenir no Angular.js que seja propagado o evento de um elemento com ng-click filho para o ng-click do pai, basta adicionar o $event.stopPropagation().
Abaixo um exemplo de um html com Angular.js em que se clicado, o elemento filho iria executar sua ação definida no ng-click, assim como seu pai.
<a ng-click="fn1()">
<button class="special-button" ng-click="fn2()">Teste</button>
</a>
Ao clicar no link, apenas a função fn1 seria executada.
Ao clicar no botão, a função fn2 seria executada e em seguida af função fn1 seria execucada.
Caso queira prevenir este comportamento e ter apenas a função correspondente ao elemento clicado executada, basta adicionar $event.stopPropagation() após as funções no ng-click, ou passar $event como argumento da função e dentro da função, executar o $event.stopPropagation().
Iremos demonstrar abaixo como fazer uma das formas sugeridas.
<a ng-click="fn1()"> <button class="special-button" ng-click="fn2();$event.stopPropagation()">Teste</button> </a>
Artigos relacionados:
Melhorias de performances manuais com o AngularJs – $timeout
Pesquisa sobre satisfação com o Angular em 2016-2018 e seu futuro
Diferença entre angular.copy e Angular.extend em objetos JavaScript
Processo típico de migração do Angular 1 para o Angular 2
Como efetuar o click do mouse no linux via linha de comando
jQuery like Angular.js directive
Angular.js – Versão 1.4 lançada
Migrando do Angular.js 1.0.8 para a versão 1.2.0
Alterações de funcionamento entre o ng-options do Angular 1.3 e 1.4