Collapse (simple)

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<div ng-controller="myCtrl">
  <div class="title row-fluid">
    <div>Things
      <button class="btn btn-primary" class="collapse" ng-click="isThingsCollapsed = !isThingsCollapsed">Collapse/Expand</button>
    </div>
    <div>
      <h5> Status of isThingsCollapsed <input class="input-small" type="text" value="{{isThingsCollapsed}}" /></h5>
    </div>
  </div>
  <div collapse="isThingsCollapsed">
    <div class="well well-small">
      <h5>ng-repeat Output</h5>

      <ul>
        <li ng-repeat="things in thingsModel.things">{{things.thingy}}</li>
      </ul>
    </div>
    <div class="well well-small">
      <h5>Manual Output</h5>

      <ul>
        <li>{{thingsModel.things[0].thingy}}</li>
        <li>{{thingsModel.things[1].thingy}}</li>
        <li>{{thingsModel.things[2].thingy}}</li>
      </ul>
    </div>
  </div>
</div>

JavaScript

var myApp = angular.module('myApp', ['ui.bootstrap']);

myApp.controller('myCtrl', function($scope) {

  $scope.isThingsCollapsed = false;

  $scope.thingsModel = {
    "things": [{
        "thingy": "First"
      },
      {
        "thingy": "Second"
      },
      {
        "thingy": "Third"
      }
    ]
  };
});