javascript - click and run one function of two different function in one div in angular -

i create 2 div , each div had different angular function. want click 1 of them using ng-click. if 1 of div click, hope me running own function in case run both of function. code looks :

html code :

<div ng-controller="ctrl1">     <div ng-click="titi();" style="width:200px; height:200px; background-color:red;">          <div ng-click="toto();" style="width:100px; height:100px; background-color:yellow;">click me</div>     </div> </div> 

and angular code :

var app = angular.module('myapp', []);  function ctrl1($scope) {      $scope.toto = function(){         alert('toto');     };      $scope.titi = function(){         alert('titi');     }; } 

if click yellow div, show alert toto , titi. , if click red div, show alert titi. want when click 1 of them, run own function click. there wrong? please :(

here click on inner element div propagated outer div. use $event.stoppropagation(); prevent click propagation:

<div ng-controller="ctrl1">     <div ng-click="titi();" style="width:200px; height:200px; background-color:red;">          <div ng-click="toto(); $event.stoppropagation();" style="width:100px; height:100px; background-color:yellow;">click me</div>     </div> </div>