Reusing code but with custom content - angularjs

Question

I have a bunch of pages with code for a nice looking footer area for buttons and stuff at the bottom of the page:
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-inner">
<footer>
<a class="btn btn-warning actionButton" href="#/">
<i class="glyphicon glyphicon-trash icon-white" />
Cancel
</a>
<a class="btn btn-primary actionButton" data-ng-click="saveSampleForm(sampleForm)" data-ng-disabled="form.$invalid">
<i class="glyphicon glyphicon-ok icon-white" />
Save
</a>
<div class="version">v{{applicationdata.Version}}</div>
</footer>
</div>
</div>
</nav>
I know about the nginclude tag, but is there a way to reuse the nav portion of this code, but have custom <footer> content? The buttons change from page to page. Maybe a directive? Still learning this stuff...
Edit: I know I could add the code for the <footer> content to my $scope and then use {{footerContent}}, but I would prefer to keep html out of my model.

Answer 1

You can certainly do so. Here's an idea using transclusion with directives.
Directive
app.directive('navFooter', function() {
return {
templateUrl: 'nav.html',
replace: true,
transclude: true,
restrict: 'E'
}
})
nav.html
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-inner">
<footer ng-transclude>
</footer>
</div>
</div>
</nav>
Usage
<nav-footer>
<a class="btn btn-warning actionButton" href="#/">
<i class="glyphicon glyphicon-trash icon-white"></i>
Cancel
</a>
<a class="btn btn-primary actionButton" data-ng-click="saveSampleForm(sampleForm)" data-ng-disabled="form.$invalid">
<i class="glyphicon glyphicon-ok icon-white"></i>
Save
</a>
<div class="version">v{{applicationdata.Version}}</div>
</nav-footer>
Demo link.