How to add a new markdown HTML element to your AngularJS App

gistfile1.md

First install [https://github.com/coreyti/showdown](showdown js) component:

yeoman install showdown

This adds the showdown component to your App.

Create a new 'markdown' AngularJS Directive:

yeoman init angular:directive markdown

This creates two new files:

app/scripts/directives/markdown.js
test/spec/directives/markdown.js

Edit app/scripts/directives/markdown.js and change as follows:

yourApp.directive('markdown', function() {
  var converter = new Showdown.converter();
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      var tmp = $interpolate(element.text())(scope);
      $timeout(function() {
        var htmlText = converter.makeHtml(tmp);
        element.html(htmlText);
      }, 0);
    }
  };
});

Finally, add a reference to showdown.js to your index.html:

<script src="components/showdown/compressed/showdown.js"></script> 

You should now be able to use the new markdown element in any of your views, e.g <markdown> **hello world** </markdown>, or <markdown>{{foo}}</markdown>.