Rebinding 'ng-click' directive when in 'ng-view'

I am using the AngularJS: directive ng-click="$event.stopPropagation();"

to open the bootstrap dropdown outside of the first subsequent click. It works great.

When I use it ng-view

to route to the same item, the dynamically rendered version of the dropdown loses functionality ng-click

. How can I relink this item?

EDIT . As requested below for comments, I created Plunker . Currently this pre- version ng-view

behaves the way I want, i.e. When the user clicks the bootstrap dropdown button, the dropdown menu item appears and remains open until the user navigates outside of the menu (or again on the dropdown button). I accomplished this behavior by changing the tag .dropdown-menu

in the html with ng-click="$event.stopPropagation();"

.

What I found is that as soon as I try to add a resource module ngRoute

to my application (as the predecessor of the component coding $routeProvider

), the directive ng-click="$event.stopPropagation();"

will terminate immediately. This is where I add ngRoute

to the above Plunk:

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

      

        
        
        
      

    

Can someone tell me what is going on and how can I fix it? Ultimately I want to render the button through the view, but this requires with a directive ng-click

.

EDIT2 . A user provided a working solution in the comments below. Removing tags #

from href

is ng-click

not skipped. Implemented this solution in Plunker for posterity.