title: Active button states in Angular + Bootstrap
body: <p>Seems like a simple problem but I'm actually having trouble with it.</p>
  
  <p><a href="http://plnkr.co/edit/UBmhlPL0wNoY0gjLestO" rel="nofollow">Plunk here</a></p>
  
  <p>Basically I have a ng-repeat of buttons and then a block of text after that clicking the button will show.  However, when I click a button I want to hide the blocks of text from all the <em>other</em> buttons and remove the active states from the other buttons.  Basically only 1 button block of text should be shown at a time.</p>
  
  <p>Seems easy, but the way ng-hide handles scope (scope: true) means I can't really look into the other scopes and turn each of them off.  The other thing is that <em>I don't want to alter the actual array from ng-repeat if at all possible.</em>  This is data from an API that I have to send back and I'm attempting to not alter the actual data structure if I can.</p>
  
  <pre><code>&lt;div class="row" ng-repeat="button in buttons"&gt;
      &lt;div class="col-sm-2"&gt;
          &lt;button ng-click="showInfo = !showInfo" class="btn btn-primary"&gt;{{button.name}}&lt;/button&gt;
      &lt;/div&gt;
      &lt;div ng-show="showInfo" class="col-sm-3"&gt;
          &lt;div class="alert alert-success"&gt;{{button.extraInfo}}&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And JS</p>
  
  <pre><code>app.controller('MainCtrl', function($scope) {
    $scope.buttons = [
      { name: 'One', extraInfo: 'Extra info for button 1' },
      { name: 'Two', extraInfo: 'Extra info for button 2' },
      { name: 'Three', extraInfo: 'Extra info for button 3' }
    ];
  });
  </code></pre>