title: What is the correct way to make an angular app responsive inside a <div> using Bootstrap?
body: <p>I built a standalone app using angular, and it was responsive (I didn't do any work, just used row-fluid, etc). However, now I'm preparing to install this standalone app into an existing site built in a different language. I bootstrapped a div with angular, and applied Twitter Bootstrap css only to that div. </p>
  
  <p>Then, I used JQuery UI and some angular wrapper directives to make the div where the app lives draggable, droppable, and resizable. I ran into a problem when I started resizing the div, though. The built in responsive design responds to the size of the overall window, not the size of the div. </p>
  
  <p>Sorry about the bad CSS inline styling; I'm still just hacking around to make it work. Here's my code right now -- would love it if anyone had some input.</p>
  
  <p>The partials just have some forms in row-fluid tags, and some tables. </p>
  
  <p>The whole point is that it's a tool that sits in the corner that is pretty small but can be expanded to show a fuller view. Everything needs to fit when it is small, though. </p>
  
  <pre><code>&lt;div draggable droppable resizable class="bootstrapped" ng-app="myApp" id="ambatool"&gt;
  
   &lt;div id="handle" style="background-color: gray; height: 50px; cursor: move"&gt;&lt;/div&gt;
          &lt;div style="padding:20px" class="container" id="maintool"&gt;
              &lt;div ng-view&gt;
              &lt;/div&gt;
  
           &lt;ul class="nav nav-tabs"&gt;
                  &lt;li&gt;&lt;a href="#/detail" data-toggle="tab" id="detailtab"&gt;Detail&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#/queue" data-toggle="tab" id="queuetab"&gt;Queue&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="dock"&gt;&lt;/div&gt;
  </code></pre>