When click outside of a div the transition happens to close div

Question

I have a scenario when I click on something a div opens with some transitions and when I click on outside DOM I need to close the div with some transitions again.

HTML:

<div id='outerdiv' ng-controller="MyCtrl" >
<div ng-click="myValue=!myValue">RIGHT</div>
  <div id="one" class='animate-hide' ng-hide="myValue">
    this is just a sample div
  </div>
  {{myValue}}
</div>

JS:

var app = angular.module("myApp1", ["ngAnimate"]);
  app.controller("MyCtrl", function ($scope) {
  $scope.myValue=true;
});

CSS:

.animate-hide {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
  position: absolute;
  left: 0;
  top: 10px;
}
.animate-hide.ng-hide {
  left: -100%;
  opacity:0;
  padding:0 10px;
}

Here .animation-hide append on div open and .animate-hide.ng-hide append on div close. Right on I am doing when I click on the same element the div should open and close but I need when I click on that element the div should open and when I click any where else it should close.

But I dont' understand how to do that Here is some thing I have tried - DEMO

Answer 1

Just create a directive to detect any click outside of your div. And change, the value of ng-hide according to that. Here is the working plunker with some modification to your code. Hope this will help you.

Plunker : https://plnkr.co/edit/dMg6PP63cafWVBtXzexd?p=preview

(function () {
    var module = angular.module('anyOtherClick', []);

    var directiveName = "anyOtherClick";

    module.directive(directiveName, ['$document', "$parse", function ($document, $parse) {
        return {
            restrict: 'A',
            link:  function (scope, element, attr, controller) {
                var anyOtherClickFunction = $parse(attr[directiveName]);
                var documentClickHandler = function (event) {
                    var eventOutsideTarget = (element[0] !== event.target) && (0 === element.find(event.target).length);
                    if (eventOutsideTarget) {
                        scope.$apply(function () {
                            anyOtherClickFunction(scope, {});
                        });
                    }
                };

                $document.on("click", documentClickHandler);
                scope.$on("$destroy", function () {
                    $document.off("click", documentClickHandler);
                });
            },
        };
    }]);
})();