JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>Content Discovery</title>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script data-require="angular.js@*" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.9/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <script src="app.js"></script>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
</head>

<body>
  <div class="container" data-ng-controller="popCtrl">
    <br />
    <a popover tabindex="0" role="button" 
    class="btn btn-primary btn-sm" 
    data-container="body" data-toggle="popover" 
    data-html="true" title="<b>Coltrane Data</b>" 
    data-content="<showfor input-list='records'></showfor>">
              Coltrane
      </a>
    <showfor input-list='records'></showfor>
  </div>
</body>

</html>

JavaScript

'use strict';
var isbnApp = angular.module('plunker', []);

isbnApp.directive('showfor',function(){
  return{
    restrict:"E",
    scope: {
      inputList: "="
    },
    template:"<p><ul><li ng-repeat='i in inputList'>{{i}}</li></ul></p>",
    link: function(scope, element, attrs){
      console.log(scope.inputList); 
    }
  };
});

isbnApp.controller('popCtrl', function($scope) {
  $scope.records = [{
    "imageType": "JPEG",
    "rendition": "cover_80"
  }, {
    "imageType": "TIFF",
    "rendition": "cover_20"
  }];
  $scope.passengers =["Me","You"];
}).directive('popover', function($compile, $timeout){
  return {
    restrict: 'A',
    link:function(scope, el, attrs){
      var content = attrs.content; //get the template from the attribute
      var elm = angular.element('<div />'); //create a temporary element
      elm.append(attrs.content); //append the content
      $compile(elm)(scope); //compile 
      $timeout(function() { //Once That is rendered
        el.removeAttr('popover').attr('data-content',elm.html()); //Update the attribute
        el.popover(); //set up popover
       });
    }
  }
});