JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<div class="row" ng-app="MyApp" ng-controller="MyController">
  <div class="col-xs-offset-1 col-xs-4">
      <a class="btn btn-default" click-anywhere-but-here="showMenu=false" 
      ng-click="showMenu=true">Dorpdown</a>
      <ul class="dropdown-menu" style="display: block;" 
      ng-show="showMenu">
            <li>Action</li>
            <li>Action</li>
            <li>Action</li>
          </ul>
  </div>
  <div class="col-xs-4">
      <input type="text"  click-anywhere-but-here="showList=false" 
      ng-click="showList=true" placeholder="dropdown list"/>

      <ul class="dropdown-menu" style="display: block;" 
      ng-show="showList">
            <li>Action</li>
            <li>Action</li>
            <li>Action</li>
          </ul>
  </div>
</div>

JavaScript

var app = angular.module('MyApp', [])

app.directive('clickAnywhereButHere', function ($document) {
        directiveDefinitionObject = {
            link: {
                pre: function (scope, element, attrs, controller) { },
                post: function (scope, element, attrs, controller) {
                    onClick = function (event) {
                        var isChild = element.has(event.target).length > 0;
                        var isSelf = element[0] == event.target;
                        var isInside = isChild || isSelf;
                        if (!isInside) {
                            scope.$apply(attrs.clickAnywhereButHere)
                        }
                    }
                    $document.click(onClick)
                }
            }
        }
        return directiveDefinitionObject
    });

app.controller('MyController', function($scope){

})