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){
  return {
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) {
      elem.bind('click', function(e) {
        // this part keeps it from firing the click on the document.
        e.stopPropagation();
      });
      $document.bind('click', function() {
        // magic here.
        scope.$apply(attr.clickAnywhereButHere);
      })
    }
  }
})

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

})