JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular-resource.js"></script>
<h2>
    The dropdown gets enabled if I click anywhere other than the disabled dropdown
</h2>

<div ng-app="App" ng-controller="ctrl" style="border: 10px solid black;">
    <div ng-click="enable()" ng-class="{'disabled': disabled, 'enabled': !disabled}">
        <select ng-disabled="disabled">
            <option>Disabled DropDown</option>
        </select>
        <input type="text" ng-disabled="disabled" size="100" placeholder="Click here to enable the dropdown" />
    </div>
    <div ng-click="enable()">
        <select>
            <option>Enabled dropdown</option>
        </select>
    </div>
</div>

CSS

.disabled {
    position: relative;
}
.disabled:after {
    position: absolute;
    content:'';
    width: 100%;
    height: 100%;
    opacity: .3;
    background: yellow;
    top: 0;
    left: 0;
}

JavaScript

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

function ctrl($scope) {
    $scope.disabled = true;
    $scope.enable = function () {
        $scope.disabled = false;
    }
}