title: Need help to optimize the clickOutsideToClose of angular that is not working right
body: <p>I have a problem with a md-dialog in my project.</p>
  
  <p>In all project dialogs, only one that has the functionality to close when clicked off, the rest is locked. I can do the lock by inserting the <code>clickOutsideToClose: false</code> directive in the code.</p>
  
  <pre><code>$mdDialog.show({
      controller: 'sascarReportAddonsModal',
      templateUrl: 'infra/template/sascar-report-addons/sascar-report-addons-modal.html',
      bindToController: true,
      parent: angular.element(document.body),
      targetEvent: ev,
      locals: {
          previousModal: vm.showSideDialog,
          selectedIndex: selectedIndex
      },
      clickOutsideToClose:true,
      fullscreen: false
  });
  </code></pre>
  
  <p>But in the dialog that the directive is <code>clickOutsideToClose: true</code> it does not work. I was able to work around this problem by adding in the dialog controller this code:</p>
  
  <pre><code>$timeout(callAtTimeout, 3000);
  function callAtTimeout() {
      angular.element(document).find("md-backdrop").on('click', function() {
          closeDialog();
      });
  }
  </code></pre>
  
  <p>My question is, how can I make this code better without using the timeout. Make <code>angular.element(document).find("md-backdrop").on('click', function() { closeDialog();});</code> only load when the dialog completes loading.</p>