I am trying to stopPropagation to prevent a Twitter Bootstrap navbar dropdown from closing when an element (link) inside an li is clicked. Using this method seems to be the common solution.

In Angular, seems like a directive is the place to do this? So I have:

// do not close dropdown on click

directives.directive('stopPropagation', function () {

    return {

        link:function (elm) {            

            $(elm).click(function (event) {                

                event.stopPropagation();

            });

        }

    };

});

... but the method does not belong to element:

TypeError: Object [object Object] has no method 'stopPropagation'

I tie in the directive with

<li ng-repeat=foo in bar>

  <div>

    {{foo.text}}<a stop-propagation ng-click=doThing($index)>clickme</a>

  </div>

</li>

Any suggestions?