I want to hide my div for notifications when clicked outside of it. Here is the plunker code link containing the HTML code:
<div ng-hide="notification" ng-click="notifications($event);"><i class="fa fa-bell" aria-hidden="true"></i></div>
<div ng-hide="notifyData">
<ul>
<li ng-repeat="noti in newNotificationarray">
<div class="notifymsg">{{noti.msg}}</div>
<div class="notifytitle">
<a href="#">{{noti.title}}</a>
</div>
<div class="notifyName">{{noti.cName}}</div>
</li>
</ul>
</div>
And here is the JS code in the controller:
$scope.notifications=function(event){
$scope.notifyData=!($scope.notifyData);
event.stopPropagation();
};
window.onclick = function(){
if ($scope.notifyData) {
$scope.notifyData=false;
$scope.$apply();
}
};
If I do not use "event.stopPropagation();", the div will hide when clicked anywhere on the screen, including the notification div.