title: How can i apply a draggable directive to bootstrap modal using angularJS?
body: <p>I am using bootstrap modal in my Angular Application, it works fine. I need to make it draggable and resizeable, so i have defined a directive. The issue now is it getting applied to the content inside the modal window, hence the modal window becomes transparent.</p>
  
  <p>how can i assign the draggable directive to the modal window when opening the window?
  Here is the code,</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div ng-controller="CustomWidgetCtrl"&gt;
      &lt;div class="box-header-btns pull-right" style="top:10px" &gt;
          &lt;a title="settings" ng-click="openSettings(widget)"&gt;&lt;i class="glyphicon glyphicon-cog"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>App.js:</strong></p>
  
  <pre><code>var routerApp = angular.module('DiginRt',  ['ui.bootstrap','ngRoute']);
  routerApp.controller('CustomWidgetCtrl', ['$scope', '$modal',
    function($scope, $modal) {
  
      $scope.openSettings = function(widget) {
            $modal.open({
              scope: $scope,
              templateUrl: 'chart_settings.html',
              controller: 'chartSettingsCtrl',        
              resolve: {
                widget: function() {
                  return widget;
                }
              }
            });
          };
      }
      ])
  </code></pre>
  
  <p>Chart Settings is another HTML page. Here is my Draggable directive. </p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I have update the issue with <a href="http://plnkr.co/edit/eEHu3VOoViBTubVFE58Y" rel="noreferrer"><code>Plunker</code></a></p>
  
  <p><strong>Issue:</strong>
  <img src="https://i.stack.imgur.com/2tJt7.png" alt="enter image description here"></p>