Instead of utilizing the suggested boxes layout, consider implementing tabs for a better user experience.
HTML
<div class="pane">
<h3>Plotly charts</h3>
<ul class="tabrow">
<li ng-repeat="tab in tabs"
ng-class="{active:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<script type="text/ng-template" id="one.tpl.html">
<div id="viewOne" class="tabcontent">
<div id="plotlyChart"></div>
</div>
</script>
... (additional script templates) ...
etc
CSS
/* customized CSS for tabs styling */
.tabrow {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
line-height: 24px;
}
... (other CSS styles) ...
AngularJS
.controller('perspectivesCtrl',
['$rootScope', '$scope', '$uibModal', '$routeParams', '$log', '$timeout', '$http', 'getMessages',
function ($rootScope, $scope, $uibModal, $routeParams, $log, $timeout, $http, getMessages) {
$scope.tabs = [{
title: 'One',
url: 'one.tpl.html'
}, {
title: 'Two',
url: 'two.tpl.html'
}, {
title: 'Three',
url: 'three.tpl.html'
}];
$scope.currentTab = 'one.tpl.html';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function (tabUrl) {
return tabUrl == $scope.currentTab;
}
}])