floating-button-directive.js

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

angular.module('App.FloatingButton')
  .directive('floatingButton', floatingButtonDirective)
  .run([
    '$compile',
    '$rootElement',
    '$rootScope',
    function($compile, $rootElement, $rootScope) {
      var html = '<floating-button></floating-button>';
      var scope = $rootScope.$new();
      scope.text = 'test';

      $rootElement.append($compile(html)(scope));
    }
  ]);