JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html ng-app="dialog">
  <head>
    <title>Bootstrap Test</title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js"></script>
    <script src="http://ci.angularjs.org/job/angular.js-angular-v1.2.x/lastSuccessfulBuild/artifact/build/angular.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <aside class="sidebar">
        some kind of menu
        <ul>
          <li>item1</li>
          <li>item2</li>
          <li>item3</li>
        </ul>
      </aside>
      <article class="content" ng-controller="MainCtrl" ng-init="changeUserNameDialog={show:false}">
        <h2>Hello {{username}}!</h2>
        vanilla bootstrap: <a class="btn" data-controls-modal="my-modal" data-keyboard="true">change username</a> (no logic)

        <hr>

        <h2>Hello {{username}}!</h2>
        ng+bootstrap: <a class="btn" ng-click="changeUserNameDialog.show = true">change username</a>
        <div ng-repeat="i in [1]">
         <bs-dialog when="changeUserNameDialog.show"
                   title="Change your username"
                   primary-label="Change"
                   primary-action="changeName(username)">
          <p>You can change your username to anything you want.</p>
          <label for="username">new username:</label><input name="username" ng-model="username">
         </bs-dialog>
        </div>
      </article>
    </div>

    <!-- bootstrap dialog template -->
    <div id="my-modal" class="modal hide fade">
      <div class="modal-header">
        <a href="#" class="close">&times;</a>
        <h3>Change your username</h3>
      </div>
      <div class="modal-body">
        <p>You can change your username to anything you want.</p>
        <label for="username">new username:</label><input name="username">
      </div>
      <div...

JavaScript

$(function() {
  $('#my-modal').modal();
})


function MainCtrl($scope) {
  $scope.username = 'Ferdo Mravec';
  $scope.changeName = function(name) {
    $scope.username = name;
  }
}

dialogApp = angular.module('dialog', []);

dialogApp.directive('bsDialog', function($templateCache, $document, $compile) {
  return {
    terminal: true,
    link: function(scope, element, attrs) {
      var dialogElement,
          dialogBodyElement,
          dialogScope,
          dialogBodyScope,
          dialogBodyTemplate = element.contents();

      element.remove();

      scope.$watch(attrs.when, function(show) {
        if (show) {
          dialogScope = scope.$new(); // maybe even use $rootScope instead
          dialogBodyScope = scope.$new(); // must be child of scope => no need to export model

          angular.extend(dialogScope, {
            title: attrs.title,
            primaryLabel: attrs.primaryLabel || 'OK',
            secondaryLabel: attrs.secondaryLabel || 'Cancel',
            closeDialog: function() {
              dialogElement.modal('hide');
            },
            primaryAction: function() {
              this.closeDialog();
              dialogBodyScope.$eval(attrs.primaryAction);
            },
            secondaryAction: function() {
              this.closeDialog();
              dialogBodyScope.$eval(attrs.secondaryAction);
            }
          });

          dialogElement = $($templateCache.get('dialog-template'));
          $document.append(dialogElement);
          $compile(dialogElement)(dialogScope);
          dialogBodyElement = dialogElement.find('.modal-body');
          dialogBodyElement.append(dialogBodyTemplate);
          $compile(dialogBodyElement)(dialogBodyScope);

          dialogElement.modal('show');
          dialogElement.bind('hidden', function() {
            scope.$apply(function() {
              dialogScope.$destroy();
              dialogBodyScope.$destroy();
              dialogElement.remove();
             ...