title: Change UI Bootstrap accordion group content by click a button in the previous group
body: <p>I have this accordion:</p>
  
  <pre><code>        &lt;uib-accordion close-others="true"&gt;
              &lt;uib-accordion-group heading="Action" is-open="true" class="text-center"&gt;
                  &lt;div class="btn-group text-center" data-toggle="buttons" &gt;
                      &lt;button type="button" class="btn" 
                          ng-repeat="action in actions" ng-model="$parent.selectedAction" uib-btn-radio="action"
                          ng-class="{'btn-danger custom-btn-danger': $index == 0, 'btn-success custom-btn-success': $index == 1}" &gt;
                          {{action.text}}
                      &lt;/button&gt;
                  &lt;/div&gt;
                  {{selectedAction}}
              &lt;/uib-accordion-group&gt;
              &lt;uib-accordion-group heading="Confirm" is-open="true"&gt;
                  &lt;div ng-if="selectedAction.value == 'reject'"&gt;
                      Comments
                      &lt;br /&gt;
                      &lt;textarea cols="30" rows="5"&gt;&lt;/textarea&gt;
                      &lt;br /&gt;
                      &lt;br /&gt;
                      &lt;div class="text-center"&gt;
                          &lt;input type="button" value="Reject" class="btn btn-danger active" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div ng-if="selectedAction.value == 'approve'"&gt;
                      &lt;div class="text-center"&gt;
                          &lt;div class="btn-group btn-group-vertical" data-toggle="buttons"&gt;
                              &lt;button type="button" class="btn btn-primary custom-btn-primary"
                                  ng-repeat="item in items" ng-model="$parent.selectedProcessLevel" uib-btn-radio="item"
                                  ng-style="roundTopRight($index)"&gt;{{item.text}}&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;br /&gt;
                      Comments
                      &lt;br /&gt;
                      &lt;textarea cols="30" rows="5"&gt;&lt;/textarea&gt;
                      &lt;br /&gt;
                      &lt;br /&gt;
                      &lt;div class="text-center"&gt;
                          &lt;input type="button" value="Approve" class="btn btn-success active" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/uib-accordion-group&gt;
          &lt;/uib-accordion&gt;    
  </code></pre>
  
  <p>And this javascript:</p>
  
  <pre><code>$scope.selectedAction = { value: 'approve', text: 'Approve', isOpen: false };
  
  $scope.actions = [
      { value: 'reject', text: 'Reject', isOpen: true },
      { value: 'approve', text: 'Approve', isOpen: false },
  ];
  
  $scope.selectedProcessLevel = { value: '2lp', text: '2 Level Process' };
  
  $scope.processLevels = [
      { value: '1', text: 'One' },
      { value: '2', text: 'Two' },
      { value: '3', text: 'Three' },
  ];
  
  $scope.roundTopRight = function (index) {
      if (index == 0)
          return { 'border-top-right-radius': '4px' };
  }
  </code></pre>
  
  <p>What I want to do is change the content of the second accordion Group by clicking the reject or approve button. Before using UI Bootstrap accordion it was a simble table and all worked perfectly.</p>
  
  <p>Is there a scope issue?</p>
  
  <p>And one more thing: what have I to do to collapse automatically the action group and expand the confirm group by clicking one of the buttons?</p>
  
  <p>Thank you</p>