controller

'use strict';

angular.module('app.student').controller('ccRecommendationsCtrl', function () {
	
	this.showClusters = function() {
		return this.recommendations.length;
	};

	this.showDisciplines = function(cluster) {
		return cluster.disciplines.length;
	}
});

directive

'use strict';

angular.module('app.student').directive('ccRecommendations', function ($compile) {
	return {
		replace: true,
		restrict: 'E',
		scope: {
			recommendations: '='
		},
		templateUrl: 'app/student/directives/ccRecommendations/ccRecommendations.tpl.html',
		bindToController: true,
		controllerAs: 'ccRecommendationsCtrl',
		controller: 'ccRecommendationsCtrl'
	};
});

template

<div>
	<ol ng-show="ccRecommendationsCtrl.recommendations.length">
		<li ng-repeat="cluster in ccRecommendationsCtrl.recommendations.clusters">
			{{cluster.title}}
			<ol ng-show="ccRecommendationsCtrl.showDisciplines(cluster)">
				<li ng-repeat="discipline in cluster.disciplines">{{discipline.title}}</li>
			</ol>
			<ul class="list list-unstyled" ng-hide="ccRecommendationsCtrl.showDisciplines(cluster)">
				<li><i class="fa fa-sm fa-warning txt-color-red"></i> Cluster Interview Incomplete</li>
			</ul>
		</li>
	</ol>
	
	<ul class="list list-unstyled" ng-hide="ccRecommendationsCtrl.showClusters">
		<li><i class="fa fa-sm fa-warning txt-color-red"></i> Primary Interview Incomplete</li>
	</ul>
</div>