JQuery not working on elements inside ng-view

Question

I'm new to angular, been trying to fix this for about an hour now but can't get it working. I have some html code:

<li class="notification-dropdown hidden-xs hidden-sm">
<a href="#" class="trigger">
    <i class="icon-warning-sign"></i>
    <span class="count">8</span>
</a>
<div class="pop-dialog">
    <div class="pointer right">
        <div class="arrow"></div>
        <div class="arrow_border"></div>
    </div>
    <div class="body">
 ...

The notification pop-dialog is hidden by default and the following JQuery shows it when the .notification-dropdown is clicked

    $(document).on("click", ".notification-dropdown", function (e) {
        e.preventDefault();
        e.stopPropagation();

        // hide all other pop-dialogs
        $(".notification-dropdown .pop-dialog").removeClass("is-visible");
        $(".notification-dropdown .trigger").removeClass("active");

        var $dialog = $(this).children(".pop-dialog");

        $dialog.toggleClass("is-visible");
    });

For some reason, this code does not work when I put the html into AngularJS's ng-view loaded as a partial into a main html document.

I've already loaded the JQuery lib before Angular.

I've tried to shorten the code for simplicity, I can show more code if needed.

Answer 1

Best try to avoid using jQuery with AngularJS completely. Using both together in this fashion is a common mistake among those new to Angular, coming form a jQuery background. Here is a great answer on that topic: "Thinking in AngularJS" if I have a jQuery background?

You could just use ui bootstrap´s dropdown .

Alternatively, there are ngShow and ngIf . If you still want to use your own css class to hide it, just set the class with ngClass .

Then, you can use ngClick to recieve the click event.

Here is how it would look (HTML only, you dont even have to write any JS for this):

<li class="notification-dropdown hidden-xs hidden-sm" ng-click="showDialog = !showDialog">
    <a href="#" class="trigger">
        <i class="icon-warning-sign"></i>
        <span class="count">8</span>
    </a>
    <div class="pop-dialog" ng-show="showDialog">
        <div class="pointer right">
            <div class="arrow"></div>
            <div class="arrow_border"></div>
        </div>
        <div class="body">
            <!-- body content -->
        </div>
    </div>
</li>

EDIT : Added Code
EDIT : working plunk