JSFiddle - React, Tailwind, and code Playground
HTML
<body ng-app="MyApp" ng-controller="ExampleController as example">
<div ng-repeat="item in example.items" class="someClass" ng-include src="item.type+'.html'">
<!-- load a different template (partial) depending on the value of item.type -->
</div>
</body>
<!-- Defining Angular cached partials -->
<script type="text/ng-template" id="type1.html">
Type 1
</script>
<script type="text/ng-template" id="type2.html">
Type 2
</script>
<script type="text/ng-template" id="type3.html">
Type 3
</script>
<script type="text/ng-template" id="type4.html">
Type 4
</script>
CSS
.someClass{
float: left;
width: 100px;
height: 100px;
background-color: black;
border: 2px solid white;
color: white;
}
JavaScript
angular.module('MyApp',[]);
angular.module('MyApp').controller('ExampleController', [ExampleController]);
function ExampleController() {
var ctrl = this;
ctrl.items = [
{"type": "type1"},
{"type": "type2"},
{"type": "type3"},
{"type": "type4"}
];
}