AngularJS 1.5 Transclusion

var app = angular.module('plunker', []);

app.controller('MainCtrl', function() {
  var vm = this;
});

app.directive('list', function() {
  return {
    restrict: 'AE',
    scope: {},
    transclude: true,
    replace: true,
    template: '<ul ng-transclude></ul>'
  }
});

app.directive('listItem', function() {
  return {
    restrict: 'AE',
    require: '^list',
    scope: {
      title: '@'
    },
    transclude: true,
    replace: true,
    template:'<li></span><b>{{title}}: </b><span ng-transclude></span></span></li>'
  } 
});

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body class="content" ng-controller="MainCtrl as vm">
    <h1>Transclusion in AngularJS 1.4</h1>
    <br>
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <list>
            <list-item title="Football">is cool</list-item>
            <list-item title="Table Tennis">rocks</list-item>
            <list-item title="Football Table">is the best</list-item>
          </list>
        </div>
      </div>
  </body>

</html>

/* Put your css in here */