Re-binding the 'ng-click' directive when it's located within 'ng-view'

Question

I'm using the AngularJS directive: ng-click="$event.stopPropagation();" to keep a bootstrap dropdown menu open beyond the first subsequent click. It works fine.

When I use ng-view to route to that same element however, the dynamically rendered version of the dropdown loses its ng-click functionality. How can I re-bind this element?

EDIT: At the request of below comments I've created a Plunker. Currently this pre-ng-view version behaves as I desire, i.e. when a user clicks the bootstrap dropdown button, the dropdown-menu element appears and remains open until the user clicks outside of the menu (or once more on the dropdown button). I've accomplished this behavior by amending the .dropdown-menu tag in the html with ng-click="$event.stopPropagation();".

What I've discovered is that as soon as I try to add the ngRoute resource module into my app (as a precursor to coding the $routeProvider component), the ng-click="$event.stopPropagation();" directive will immediately fail. Here is where I'm adding ngRoute within the above Plunk:

angular.module('ui.bootstrap.demo', ['ngRoute', 'ui.bootstrap']); 

Can someone tell me what's going on and how I can fix it? I ultimately want to render the button through a view, but to do so with the ng-click directive bound and functioning.

EDIT2: User has provided a working solution in below comments. By removing the # from href tags the ng-click isn't skipped. Implemented this solution in Plunker for posterity's sake.

Answer 1

The href="#" in the a elements is causing a page navigate, try using href="" instead.