JSFiddle - React, Tailwind, and code Playground

HTML

<breadcrumb></breadcrumb>
<div ng-view></div>

CSS

body { font-family: sans-serif; }
.breadcrumb { margin: 10px; padding: 0; clear: both; overflow: auto }
.breadcrumb li { float:left; margin-left: 10px; font-size: 12px }
.breadcrumb li:after { margin-left: 10px; content: ">"; line-height: 12px; font-size: 8px; }
a { text-decoration: none; color: #777 }
h1 { font-size: 20px; font-weight: bold; margin: 10px 20px }
p  { font-size: 14px; margin: 10px 20px }

JavaScript

angular
    .module('app', [])
    .directive('breadcrumb', function() {
            return {
                restrict: 'E',
                template: "<ul class='breadcrumb'><li ng-repeat='node in path'><a ng-href='{{node.url}}'>{{node.label}}</a></li></ul>",
                replace: true,
                controller: Ctrl1
            }
    })
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/', { 
                template: '<h1>{{pgTitle}}</h1><p>Template body (should see a different title and expanded breadcrumbs).</p><p>I\'m sure it\'s a scoping issue, I just can\'t figure out how.</p>', 
                controller: Ctrl2
            });
    }]);

    function Ctrl1($scope) {
        $scope.path = [{
                label: 'Home',
                url: '#/'}];
        $scope.pgTitle = "Home"       
    }
    function Ctrl2($scope, $routeParams) {
        $scope.path = [{
                label: 'Home',
                url: '#/'},{
                label: 'Node 2',
                url: '#/node2'}];
        $scope.pgTitle = "Node 2"
    }