JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.min.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.1.0-SNAPSHOT.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<div ng-app="MyApp">
<div ng-controller="DashboardCtrl">
Testing ng repeat here
<hr />
<div id="userModal" class="hidden">
	<div class="modal-header">
		<a href="#" ng-click="close($event, result)" data-dismiss="modal" style="float:right;">Go back to users</a>
		<h3>{{ dialog.title }}</h3>
	</div>
	<div class="modal-body login-form">
		<form name="create_user_form" id="create_user_form" class="form-signin" method="post" action="" >
			<input ng-model="dialog.user.username" name="username" id="username" type="text" class="input-block-level" placeholder="Username">
			<input ng-model="dialog.user.password" name="password" id="password" type="password" class="input-block-level" placeholder="Password">
			<button ng-click="dialog.submit($event, dialog.user.username, dialog.user.password)" name="create_user" id="create_user" class="btn btn-large btn-primary" type="button">{{ dialog.btnTxt }}</button>
		</form>
		<div name="errors" id="errors" class="alert alert-error">
            <li ng-repeat="error in dialog.errors">{{ error }}</li>
		</div>
	</div>
</div>
<a class="btn btn-large btn-primary" href="#" ng-click="addUser($event)">Add User</a>
</div>
    </div>

JavaScript

angular.module('MyApp', ['ui.bootstrap.dialog']);

function DashboardCtrl($scope, $dialog) {
    
    var dialogOpts = {
        backdrop: true,
        keyboard: true,
        backdropFade: true,
        backdropClick: true,
        template:  document.getElementById('userModal').innerHTML,
        controller: 'DialogCtrl'
    };
    
    $scope.editUser = function ($event, id) {
        $event.preventDefault();
        //open the dialog
        alert('This feature is not available yet!');
    }
    
    $scope.addUser = function ($event) {
        $event.preventDefault();
        //open the dialog
        var d = $dialog.dialog(dialogOpts);
        var successHandler = function (res)
        {
            if(res.hasOwnProperty('success!')) {
                d.close();
            }
            else {
                for (var prop in res) {
                    if (res.hasOwnProperty(prop)) {
                        d.errors.push(res[prop]);
                    }
                }
            }
        }
        d.errors = ['error1', 'error2'];
        d.title = 'Add User'
        d.btnTxt = 'Create User'
        d.submit = function($event, username, password){
            $event.preventDefault();
            //submit username and password using ngResource
        }
        
        d.open().then( function(result) {
            if(result)
                alert('dialog closed with result: ' + result);
        });
    }
}

// the dialog is injected in the specified controller
function DialogCtrl($scope, dialog){
    $scope.close = function($event, result){
        $event.preventDefault();
        dialog.close(result);
    };
    
    $scope.dialog = {
        title: dialog.title,
        btnTxt: dialog.btnTxt,
        submit: dialog.submit,
        errors: dialog.errors
    }
}

function UserEditCtrl($scope, $routeParams, $location, ViewResource)
{
    alert('this feature is not available yet!');
    $location.path( "/" );
}