title: ui.bootstrap.collapse - two collapse - only one should open at a time
body: <p>I'm using ui.bootstrap's collapse and have two collapse buttons in a table row and I'd like one collapse to close before the other one opens.</p>
  
  <p>Currently the second collapse opens additionally so that both are open and are stacked on top of each other.</p>
  
  <p>I searched and found a way to solve this using bootstrap and jquery (<a href="http://jsfiddle.net/RfsS9/5/" rel="nofollow">http://jsfiddle.net/RfsS9/5/</a>), but I'd like to stick with angularjs.</p>
  
  <p>Does any one know how to solve this the angular way?</p>
  
  <p>Here is my (simplified) code:</p>
  
  <pre><code>&lt;table class="table table-bordered"&gt;
   &lt;thead&gt;
    &lt;tr&gt;
     ...
    &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;/&lt;span class="pull-right" ng-click="urlCollapsed = !urlCollapsed"&gt;&amp;#x25BC;&lt;/span&gt;&lt;/td&gt;
       ...
      &lt;td&gt;54,654&lt;span class="pull-right" ng-click="trafficCollapsed = !trafficCollapsed"&gt;&amp;#x25BC;&lt;/span&gt;&lt;/td&gt;
     &lt;/tr&gt;
  
   &lt;!-- UrlDetails --&gt;
     &lt;tr collapse="!urlCollapsed"&gt;
       &lt;td colspan="4" style="background-color: pink"&gt;&lt;/td&gt;
     &lt;/tr&gt;
  
   &lt;!-- trafficDetails --&gt;
     &lt;tr collapse="!trafficCollapsed"&gt;
      &lt;td colspan="4" style="background-color: blue"&gt;&lt;/td&gt;
     &lt;/tr&gt;
  
    &lt;/tbody&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>and the full code as a plunker: 
  <a href="http://plnkr.co/edit/T5iUXTL130p93tzNiera?p=preview" rel="nofollow">http://plnkr.co/edit/T5iUXTL130p93tzNiera?p=preview</a></p>