Angular filter to flatten object

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="angular.js@*" data-semver="1.2.19" src="http://code.angularjs.org/1.2.19/angular.js"></script>
  <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="DemoCtrl">
  <table class="table table-striped table-hover table-bordered">
    <thead>
      <tr>
        <th>Rows with filter</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in rows | flattenRows">
        <td>{{row.name}}<span class="label label-info" ng-show="row.subrow">subrow!</span></td>
      </tr>
    </tbody>
  </table>
  <hr>
  <table class="table table-striped table-hover table-bordered">
    <thead>
      <tr>
        <th>Rows without filter</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in rows">
        <td>{{row.name}}<span class="label label-info" ng-show="row.subrow">subrow!</span></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

var app = angular.module('app', [])
  .controller('DemoCtrl', function($scope) {
    $scope.rows = [{
      name: 'row1',
      subrows: [{
        name: 'row1.1'
      }, {
        name: 'row1.2'
      }]
    }, {
      name: 'row2',
      subrows: [{
        name: 'row2.1'
      }, {
        name: 'row2.2'
      }]
    }];
  })
  .filter('flattenRows', function() {
    return function(rows) {
      var flatten = [];
      angular.forEach(rows, function(row) {
        subrows = row.subrows;
        flatten.push(row);
        if (subrows) {
          angular.forEach(subrows, function(subrow) {
            flatten.push(angular.extend(subrow, {subrow: true}));
          });
        }
      });
      return flatten;
    }
  });

body {
    padding: 10px !important;   
}
.table thead tr th{
  color: #FFF;
  background: #339;
}