AngularJS Example

HTML

<div ng-app>
  <div ng-controller="testCtrl">
      <ul>
          <li ng-repeat="x in depts">{{x.name}}<br/> 
              <ul>
                  <li ng-repeat="log in x.items">{{log.name}} worked {{log.hours}} this week as a(n) {{log.dept}}</li>
              </ul>
          </li>            
      </ul>
      <br><br>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; }

JavaScript

function testCtrl($scope){
    $scope.logs = logs = [{name:'bgrimes', hours:10, dept:'app'}, {name:'aallen', hours:18, dept:'ext app'}, {name:'pmolnar', hours:8, dept:'db'}, {name:'dgelling', hours:9, dept:'db'}, {name:'yshevets', hours:5, dept:'ext db'}, {name:'plahm', hours:10, dept:'qa'}, {name:'kingert', hours:20, dept:'pm'}, {name:'jchoi', hours:2, dept:'ext qa'}, {name:'jdennis', hours:10, dept:'app'}, {name:'mpeters', hours:3, dept:'qa'}]
        
var sorted = [];
logs.forEach(function(log){if (!sorted[log['dept']]) {sorted[log['dept']]= []} sorted[log['dept']].push(log);})

$scope.depts=[];
for(var dept in sorted) {
    $scope.depts.push({name:dept,items:sorted[dept]});
}

}