write custom function for navigation angularjs

There are probably more complicated ways of doing this that might be more elegant, but I've found this to do the trick in the past. Assumes you're loading jQuery before Angular so $ is full jQuery. If you're finding yourself doing this with many different DOM elements though, it might be more effective to break this out into a factory that allows many objects to register themselves in this way with just one binding to body.

app.directive('clickOffHide',function() {
    return {
        ...
        link: function(.., elem, ..) {
            $('body').click(function(evt) {
                var $elem = $(elem);
                var $target = $(evt.target);
                if($elem.is($target) || $elem.has($target).length > 0) return;
                $elem.hide();
            });
        }
    }
});

You could try using ng-blur on the drop-down element.

<div ng-class="dropDown" ng-blur="functionToHideElement" tabindex="100">Products</div>

A div element can accept a blur event if it has a specified tabindex.

This way you can use a baked in Angular directive rather than creating your own.