rnkoaa/app.js

## app.js
var app = angular.module("modalFormApp", ['ui.bootstrap']);
app.controller("modalAccountFormController", ['$scope', '$modal', '$log',

    function ($scope, $modal, $log) {

        $scope.showForm = function () {
            $scope.message = "Show Form Button Clicked";
            console.log($scope.message);

            var modalInstance = $modal.open({
                templateUrl: 'modal-form.html',
                controller: ModalInstanceCtrl,
                scope: $scope,
                resolve: {
                    userForm: function () {
                        return $scope.userForm;
                    }
                }
            });

            modalInstance.result.then(function (selectedItem) {
                $scope.selected = selectedItem;
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };
            }]);

var ModalInstanceCtrl = function ($scope, $modalInstance, userForm) {
    $scope.form = {}
    $scope.submitForm = function () {
        if ($scope.form.userForm.$valid) {
            console.log('user form is in scope');
            $modalInstance.close('closed');
        } else {
            console.log('userform is not in scope');
        }
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

## index.html
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Angular Modal Forms</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <style>
        body 	{ padding-top:30px; }
    </style>

    <!-- JS ===================== -->
    <!-- load angular -->
    <script src="http://code.angularjs.org/1.2.6/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
    <script src="app.js"></script>
</head>

<body ng-app="modalFormApp">
    <div class="container">
        <div class="col-sm-8 col-sm-offset-2">

            <!-- PAGE HEADER -->
            <div class="page-header">
                <h1>AngularJS Form Validation</h1>
            </div>

            <div ng-controller="modalAccountFormController">
                <div class="page-body">
                    <button class="btn btn-primary" ng-click="showForm()">Create Account</button>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

## modal-form.html
<div class="modal-header">
    <h3>Create A New Account!</h3>
</div>
<form name="form.userForm" ng-submit="submitForm()" novalidate>
    <div class="modal-body">
        <!-- NAME -->
        <div class="form-group">
            <label>Name</label>
            <input type="text" name="name" class="form-control" ng-model="name" required>
            <p ng-show="form.userForm.name.$invalid && !form.userForm.name.$pristine" class="help-block">You name is required.</p>
        </div>

        <!-- USERNAME -->
        <div class="form-group">
            <label>Username</label>
            <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>
            <p ng-show="form.userForm.username.$error.minlength" class="help-block">Username is too short.</p>
            <p ng-show="form.userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
        </div>

        <!-- EMAIL -->
        <div class="form-group">
            <label>Email</label>
            <input type="email" name="email" class="form-control" ng-model="email" required>
            <p ng-show="form.userForm.email.$invalid && !form.userForm.email.$pristine" class="help-block">Enter a valid email.</p>
        </div>

    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary" ng-disabled="form.userForm.$invalid">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</form>
	var app = angular.module("modalFormApp", ['ui.bootstrap']);
	app.controller("modalAccountFormController", ['$scope', '$modal', '$log',

	function ($scope, $modal, $log) {

	$scope.showForm = function () {
	$scope.message = "Show Form Button Clicked";
	console.log($scope.message);

	var modalInstance = $modal.open({
	templateUrl: 'modal-form.html',
	controller: ModalInstanceCtrl,
	scope: $scope,
	resolve: {
	userForm: function () {
	return $scope.userForm;
	}
	}
	});

	modalInstance.result.then(function (selectedItem) {
	$scope.selected = selectedItem;
	}, function () {
	$log.info('Modal dismissed at: ' + new Date());
	});
	};
	}]);

	var ModalInstanceCtrl = function ($scope, $modalInstance, userForm) {
	$scope.form = {}
	$scope.submitForm = function () {
	if ($scope.form.userForm.$valid) {
	console.log('user form is in scope');
	$modalInstance.close('closed');
	} else {
	console.log('userform is not in scope');
	}
	};

	$scope.cancel = function () {
	$modalInstance.dismiss('cancel');
	};
	};
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Angular Modal Forms</title>
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
	<style>
	body { padding-top:30px; }
	</style>

	<!-- JS ===================== -->
	<!-- load angular -->
	<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
	<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
	<script src="app.js"></script>
	</head>

	<body ng-app="modalFormApp">
	<div class="container">
	<div class="col-sm-8 col-sm-offset-2">

	<!-- PAGE HEADER -->
	<div class="page-header">
	<h1>AngularJS Form Validation</h1>
	</div>

	<div ng-controller="modalAccountFormController">
	<div class="page-body">
	<button class="btn btn-primary" ng-click="showForm()">Create Account</button>
	</div>
	</div>
	</div>
	</div>

	</body>

	</html>
	<div class="modal-header">
	<h3>Create A New Account!</h3>
	</div>
	<form name="form.userForm" ng-submit="submitForm()" novalidate>
	<div class="modal-body">
	<!-- NAME -->
	<div class="form-group">
	<label>Name</label>
	<input type="text" name="name" class="form-control" ng-model="name" required>
	<p ng-show="form.userForm.name.$invalid && !form.userForm.name.$pristine" class="help-block">You name is required.</p>
	</div>

	<!-- USERNAME -->
	<div class="form-group">
	<label>Username</label>
	<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>
	<p ng-show="form.userForm.username.$error.minlength" class="help-block">Username is too short.</p>
	<p ng-show="form.userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
	</div>

	<!-- EMAIL -->
	<div class="form-group">
	<label>Email</label>
	<input type="email" name="email" class="form-control" ng-model="email" required>
	<p ng-show="form.userForm.email.$invalid && !form.userForm.email.$pristine" class="help-block">Enter a valid email.</p>
	</div>

	</div>
	<div class="modal-footer">
	<button type="submit" class="btn btn-primary" ng-disabled="form.userForm.$invalid">OK</button>
	<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
	</div>
	</form>