AngularJS panel heading only displays one element when defined inside a section

Question

I am working on an app that has been written in AngularJS. On one of the pages, there are a number of widgets displayed, which show information about the states of various aspects of the app. I have recently been working on adding a 'Home' button to the headings of each widget, which when clicked, will take the user to the 'root' page belonging to that widget.

I have got this working successfully on most of the widgets, however, on one of them, if I display the 'Home' button in the heading, the widget name is no longer displayed in the heading...

The template used in the directive for this widget is defined as:

.directive('table', function(tag, $location){
    return{
        restrict: 'E',
        scope: {
            ...
        },
        template: '<section class="panel-frame" ' +
                  'data-ng-class="{\'panel-brand\': !inverse(), ' +
                  '\'panel-inverse panel-inverse-borderless\': inverse()}">' +
                  'div class="panel-heading" ' +
                    '<span data="{{heading}}"></span>' +
                    '<i class="pull-right ti-home" data-ng-click="browserPage()" /> ' +
                    '<data-ng-show="heading">' +
                  '</div><ul-grid config="config" rows="tableRows || rows">' +
                  '</ul-grid></section>',

When I view the page with the template as it is above, the ti-home icon is shown on the widget heading, and when I click it, I am taken to the 'home' page for that particular widget. However, the widget heading (textual name of widget) is not currently shown on the widget as it is:

If I remove the ti-home image from the widget heading (so change it back to how it was originally), i.e.

template: '<section class="panel panel-frame" ' +
          'data-ng-class="{\'panel-brand\': !inverse(), ' +
          '\'panel-inverse panel-inverse-borderless\': inverse()}">' +
          '<div class"panel-heading" ' +
            '<span data-i18n="{{heading}}"></span>' +
            '<data-ng-show="heading">' +
          '<div><ul-grid config="config" rows="tableRows || rows">' +
          '</ul-grid></section>',

Then the heading (text name) is displayed correctly in the widget, although obviously, the 'Home' button that I had added is no longer there:

The reason I removed the -18n from the <span data-i18n ... ></span> tag when adding the 'Home' button to the widget heading was because it's my understanding that using -i18n means that you will only be able to display one thing within that tag.

I did also try adding the line for the image in the widget heading in while i18n was still in use:

'<i class="pull-right ti-home" data-ng-click="browserPage()" /> ' +

but when viewing the page, only the text part of the heading is displayed- not the image.

How can I display both the text & the Home button in the heading of the widget at the same time?

On other widgets used on the same page, I have been able to add the 'Home' button without the textual description being removed from the widget heading:

This widget has the following template in its directive:

    template: '<section class="panel panel-frame" data-ng-class="{\'panel-brand\': !inverse(), \'panel-inverse\': inverse()}">' +
              '<div class="panel-heading">' +
              '<span data-i18n="{{title}}"></span>' +
              '<i data-ng-hide="hideChartPageBtn" class="pull-right glyphicon-clickable ti-bar-chart" data-ng-click="chartPage()"></i>' +
              '<i class="pull-right ti-home" data-ng-click="chartPage()" />' +
              '<div class="umw-chart-cfg-btn-group" data-ng-if="chartCfgs.length">' +

              '<a href="" data-ng-click="btnQty = minBtns" data-ng-show="btnQty > minBtns && chartCfgs.length > minBtns" ' +
              'class="btn btn-sm"><span class="ti-angle-double-right"></span></a>' +

              '<button type="button" class="btn btn-{{conf.state}} btn-sm" data-ng-show="chartCfgs.length > 1"' +
              'data-ng-click="redrawChart(conf)" data-ng-repeat="conf in chartCfgs | limitTo: btnQty">{{$index + 1}}</button>' +
              '<a href="" data-ng-click="btnQty = chartCfgs.length" data-ng-show="chartCfgs.length > btnQty" ' +
              'class="btn btn-sm"><span class="ti-angle-double-left"></span></a>' +
              '</div></div>' +
              '<um-chart control="control"></um-chart>' +
              '</section>',

I can't see why this works, but what I'm trying to do with the 'table' widget doesn't... Anyone have any suggestions as to how I can get both the widget 'title' and the 'Home' button displayed within the widget heading at the same time?

Answer 1

Ah- spotted what the issue was: I was missing a > on the panel class:

'<div class="panel-heading" >' +