diff --git a/README.md b/README.md
index 1a4d2ad..7b80c56 100644
--- a/README.md
+++ b/README.md
@@ -123,7 +123,9 @@ var customHtml = '<div style="cursor: pointer; background-color: pink">' +
                  '<i class="glyphicon glyphicon-ok-sign"></i> Testing Custom </div>';
                  
 var customItem = {
-    html: customHtml, 
+    html: customHtml,
+    compileHtml: true,        // Defaults false, for compiling translations.
+    replaceTextByHtml: true,  // Defaults false, for using the html in the link instead of completely replace it.
     enabled: function() {return true}, 
     click: function ($itemScope, $event, value) {
         alert("custom html");
diff --git a/contextMenu.js b/contextMenu.js
index 8a46c15..4eab65b 100644
--- a/contextMenu.js
+++ b/contextMenu.js
@@ -10,7 +10,7 @@ angular.module('ui.bootstrap.contextMenu', [])
     }
 
 })
-.directive('contextMenu', ["$parse", "$q", "CustomService", "$sce", function ($parse, $q, custom, $sce) {
+.directive('contextMenu', ["$parse", "$q", "CustomService", "$sce", "$compile", function ($parse, $q, custom, $sce, $compile) {
 
     var contextMenus = [];
     var $currentContextMenu = null;
@@ -32,13 +32,14 @@ angular.module('ui.bootstrap.contextMenu', [])
 
         var $a = $('<a>');
         $a.css("padding-right", "8px");
-        $a.attr({ tabindex: '-1', href: '#' });
+        $a.attr({tabindex: '-1', href: '#'});
 
         if (typeof item[0] === 'string') {
             text = item[0];
-        }
-        else if (typeof item[0] === "function") {
+        } else if (typeof item[0] === "function") {
             text = item[0].call($scope, $scope, event, model);
+        } else if (typeof item.html !== "undefined" && item.replaceTextByHtml) {
+            text = item.compileHtml ? $compile(angular.element(item.html))($scope) : item.html;
         } else if (typeof item.text !== "undefined") {
             text = item.text;
         }
@@ -71,12 +72,12 @@ angular.module('ui.bootstrap.contextMenu', [])
         // if first item is a string, then text should be the string.
 
         var text = defaultItemText;
-        if (typeof item[0] === 'function' || typeof item[0] === 'string' || typeof item.text !== "undefined") {
+        if (typeof item[0] === 'function' || typeof item[0] === 'string' || typeof item.text !== "undefined"
+            || (typeof item.html !== "undefined" && item.replaceTextByHtml)) {
             text = processTextItem($scope, item, text, event, model, $promises, nestedMenu, $);
-        }
-        else if (typeof item.html !== "undefined") {
+        } else if (typeof item.html !== "undefined") {
             // leave styling open to dev
-            text = item.html
+            text = item.compileHtml ? $compile(angular.element(item.html))($scope) : item.html;
         }
 
         $li.append(text);
@@ -135,7 +136,7 @@ angular.module('ui.bootstrap.contextMenu', [])
 
             $ul.css({
                 display: 'block',
-                position: 'absolute',
+                position: 'fixed',
                 left: leftCoordinate + 'px',
                 top: topCoordinate + 'px'
             });
@@ -220,7 +221,7 @@ angular.module('ui.bootstrap.contextMenu', [])
         $ul.attr({ 'role': 'menu' });
         $ul.css({
             display: 'block',
-            position: 'absolute',
+            position: 'fixed',
             left: event.pageX + 'px',
             top: event.pageY + 'px',
             "z-index": 10000
@@ -249,7 +250,7 @@ angular.module('ui.bootstrap.contextMenu', [])
         $contextMenu.css({
             width: '100%',
             height: height + 'px',
-            position: 'absolute',
+            position: 'fixed',
             top: 0,
             left: 0,
             zIndex: 9999