NicholasByDesign NicholasByDesign - 1 year ago 133
Node.js Question

Angular child ng-click event does not fire after parent ng-click event

I am pretty new to Angular so I have not figured out all its little quirks yet. Currently I have button that opens an overlay with ng-click="open()". Inside the overlay there is another button that closes the overlay with ng-click="close()".

As it stands now the ng-click events will not fire if the other is present with in the view. If ng-click="open()" is present, ng-click="close()" will not fire and vice versa.

Here is a simpler version of what I am talking about, as what I am working on is a little hefty on the actual app:


<button ng-click="open()">Open</button>

<div id="overlay">
<button ng-click="close()">Close</button>


$ = function(){
//some move.js to open the overlay

$scope.close = function(){
//some move.js to close the overlay

The overlay is not generated dynamically and is rendered to the page onload.

Here is the solution as provided by @sz tech below. Not the $compile method.

Just kind of side note, as I do not think it will make a difference. I am working within a nodejs and jade environment. I put it as regular HTML and left out the controller code wrapping the open/close functions to simplify things.

Answer Source

The problem is that you are updating (div.innerHTML += "close";) the div which contains the angular code (ng-click="close()") and the binding will disappear, try to recompile the div after the update and it will work. Try out this code:

 var app = angular.module('myApp', []);
   app.controller('appCtrl', function($scope,$compile) {
   var div = document.getElementById('div');

   $ = function(){
     div.innerHTML += "open";

   $scope.close = function(){
     div.innerHTML += "close";

As you can see I'm recompiling the div and bind the current scope to it, and it will work. Here's the working example: