JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<link rel="stylesheet" href="https://rawgit.com/haxxxton/perfect-bootstrap/master/dist/perfect-bootstrap.css">
<div class="container-fluid" ng-controller="MyCtrl">
  <div class="template-container" ng-repeat="newsGroup in NewsListing | chunk:'newsGroups'">
    <div nine-item-news items="newsGroup"></div>
  </div>
</div>

<script type="text/ng-template" id="/nine-item-news-template.html">
<div class="template">
	<div class="row" ng-if="items.length">
		<div class="col-xs-12 col-md-4 col-no-padding">
			<div class="row-xs-6 row-md-12">
				<div class="abs-inner bg-darkgrey">
					<p ng-bind="items[0].title"></p>
				</div>
			</div>
		</div>
		<div class="col-xs-12 col-md-8 col-no-padding">
			<div class="row-xs-6">
				<div class="abs-inner bg-grey">
					<p ng-bind="items[1].title"></p>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12 col-md-4 col-no-padding">
			<div class="row">
				<div class="col-xs-12 col-no-padding">
					<div class="row-xs-6">
						<div class="abs-inner bg-grey">
							<p ng-bind="items[2].title"></p>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-no-padding">
					<div class="row-xs-6">
						<div class="abs-inner bg-midgrey">
							<p ng-bind="items[5].title"></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xs-12 col-md-4 col-no-padding">
			<div class="row-xs-6 row-md-12">
				<div class="abs-inner bg-white">
					<p ng-bind="items[3].title"></p>
				</div>
			</div>
		</div>
		<div class="col-xs-12 col-md-4 col-no-padding">
			<div class="row">
				<div class="col-xs-12 col-no-padding">
					<div class="row-xs-6">
						<div class="abs-inner bg-grey">
							<p ng-bind="items[4].title"></p>
						</div>
					</div>
				</div>
				<div class="col-xs-12...

CSS

.col-no-padding{
  padding-left:0;
  padding-right:0;
}
.col-no-padding > .row{
  margin-left:0;
  margin-right:0;
}
.bg-darkgrey{
  background-color:#535353;
}
.bg-midgrey{
  background-color:#808080;
}
.bg-grey{
  background-color:#959595;
}
.bg-lightgrey{
  background-color:#d0d0d0;
}
.bg-white{
  background-color:#FFFFFF;
}

JavaScript

var myApp = angular.module('myApp', []);
// http://stackoverflow.com/a/35258731/648350
myApp.filter('chunk', function() {
  function cacheIt(func) {
    cache = {};
    return function(arg) {
      // if the function has been called with the argument
      // short circuit and use cached value, otherwise call the
      // cached function with the argument and save it to the cache as well then return
      return cache[arg] ? cache[arg] : cache[arg] = func(arg);
    };
  }

  // unchanged from your example apart from we are no longer directly returning this
  function chunk(items, chunk_size) {
    var chunks = [];
    if (angular.isArray(items)) {
      if (isNaN(chunk_size))
        chunk_size = 9;
      for (var i = 0; i < items.length; i += chunk_size) {
        chunks.push(items.slice(i, i + chunk_size));
      }
    } else {
      console.log("items is not an array: " + angular.toJson(items));
    }
    return chunks;
  }
  // now we return the cached or memoized version of our chunk function
  // if you want to use lodash this is really easy since there is already a chunk and memoize function all above code would be removed
  // this return would simply be: return _.memoize(_.chunk);

  return cacheIt(chunk);
});
myApp.directive('nineItemNews', function() {
  return {
    restrict: 'A',
    replace: true,
    templateUrl: '/nine-item-news-template.html',
    scope: {
      items: '='
    },
    controller: function($scope) {
      console.log($scope.items);
    }
  }
});
myApp.controller('MyCtrl', function($scope) {
  $scope.NewsListing = [{
    "id": "71b85130-ffe4-11e6-81a4-c1bd97df0d2d",
    "title": "Exercitation ullamco laboris"
  }, {
    "id": "58847180-ffe4-11e6-81a4-c1bd97df0d2d",
    "title": "Duis aute irure dolor in reprehenderit"
  }, {
    "id": "35d2c290-ffe4-11e6-81a4-c1bd97df0d2d",
    "title": "Ut enim ad minim"
  }, {
    "id": "fdbdeb00-ffe3-11e6-81a4-c1bd97df0d2d",
    "title": "Ut enim ad minim"
  }, {
    "id":...