floating-button-directive.js

var floatingButtonDirective = function() {
  return {
    restrict: 'AE',
    scope: {
      contents: '@'
    },
    template: '<div><div class="floating-button">Text: {{ contents }}</div></div>'
  };
};

angular.module('App', [])
  .directive('floatingButton', floatingButtonDirective)
  .run([
    '$compile',
    '$rootElement',
    '$rootScope',
    function($compile, $rootElement, $rootScope) {
      var html = '<floating-button contents="{{contents}}"></floating-button>';
      var holderEle = angular.element(html);
      $rootElement.append(holderEle);
      
      var scope = $rootScope.$new();
      scope.contents = 'test'; 
      $compile(holderEle)(scope);
      $rootScope.$digest();
    }
  ]);