loss-ratio-tooltip not only doesn't show in the ui, it's not even in the markup with display: none applied. It's just gone. If I switch the order in which they're defined, loss-cost-tooltip is the one missing so for some reason the first one is clobbering the second.

index.html

<th class="{{ metric.id }}"
    ng-repeat="metric in metrics">
  {{ metric.label }}
	<loss-cost-tooltip style="padding-top: 4px;" ng-show="$index == 4" />
	<loss-ratio-tooltip style="padding-top: 4px;" ng-show="$index == 5" />
</th>

lossCostTooltip.html

'use strict';

var lossCostTooltip = function () {
  return {
		restrict: 'E',
		replace: true,
		template: '<a href="#" class="icon-info-sign info" title="<object data=\'images/loss-cost-calc.svg\' class=\'formula\' style=\'padding-left: 12px\' type=\'image/svg+xml\'></object><div style=\'font-weight: normal;\'>Loss Cost is a measure of vulnerability expressed as a ratio of modeled average annual loss to total insured value (in thousands). What is my potential loss per $1,000 in insured value?</div>"></a>',
		link: function (scope, element, attrs, layout) {
			element
				.bind('click', function(e) { e.preventDefault(); })
				.data('trigger', 'hover click')
				.data('placement', 'bottom')
				.data('html', 'true')
				.tooltip();
		}
	};
};

module.exports = lossCostTooltip;

lossRatioTooltip.html

'use strict';

var lossRatioTooltip = function () {
  return {
		restrict: 'E',
		replace: true,
		template: '<a href="#" class="icon-info-sign info" title="<object data=\'images/loss-ratio-calc.svg\' class=\'formula\' style=\'padding-left: 15px\' type=\'image/svg+xml\'></object><div style=\'font-weight: normal;\'>Loss Ratio is the relationship of modeled average annual losses and premium, expressed as a percentage. Am I receiving adequate premium for my risks?</div>"></a>',
		link: function (scope, element, attrs, layout) {
			element
				.bind('click', function(e) { e.preventDefault(); })
				.data('trigger', 'hover click')
				.data('placement', 'bottom')
				.data('html', 'true')
				.tooltip();
		}
	};
};

module.exports = lossRatioTooltip;

The problem here was using self closing tags. Declaring the directives with proper closing tags solves the issue.

<loss-cost-tooltip style="padding-top: 4px;" ng-show="$index == 4"></loss-cost-tooltip>
<loss-ratio-tooltip style="padding-top: 4px;" ng-show="$index == 5"></loss-ratio-tooltip>