<!DOCTYPE html>
<html ng-app="userPopup">
<head>
<link data-require="bootstrap-css@~3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-rc2" src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script data-require="ui-bootstrap@0.11.0" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="popupController">
<div class="container"><table class="table">
<tr>
<th>Name</th>
<th>Job</th>
<th>Age</th>
<th>Salary</th>
<th>Address</th>
</tr>
<tr ng-repeat="usr in usrs">
<td ng-bind="usr.name"></td>
<td ng-bind="usr.job"></td>
<td ng-bind="usr.age"></td>
<td ng-bind="usr.sal"></td>
<td ng-bind="usr.addr"></td>
</tr>
</table>
<button class="btn btn-primary" ng-click="addUser()">Add User</button>
</div>
</body>
</html>
// Code goes here
var userPopup = angular.module('userPopup', ['ui.bootstrap']);
userPopup.controller('popupController', function($scope, $modal, $log) {
$scope.usrs = [];
$scope.usr = {name: '', job: '', age: '', sal: '', addr:''};
$scope.addUser = function(){
var dialogInst = $modal.open({
templateUrl: 'popup.html',
controller: 'DialogInstCtrl',
size: 'lg',
resolve: {
selectedUsr: function () {
return $scope.usr;
}
}
});
dialogInst.result.then(function (newusr) {
$scope.usrs.push(newusr);
$scope.usr = {name: '', job: '', age: '', sal: '', addr:''};
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
userPopup.controller('DialogInstCtrl', function($scope, $modalInstance, selectedUsr, $log) {
$scope.usr = selectedUsr;
$scope.submitUser = function () {
$modalInstance.close($scope.usr);
// $scope.usr = {name: '', job: '', age: '', sal: '', addr:''};
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
<form class="form-horizontal" role="form" ng-submit="submitUser()">
<div class="modal-header">
<h3 class="modal-title">Add a User</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="UserName" class="col-sm-3 control-label">User Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="Name" placeholder="User Name" ng-model="usr.name">
</div>
</div>
<div class="form-group">
<label for="UserJob" class="col-sm-3 control-label">Job</label>
<div class="col-sm-5">
<input class="form-control" type="text" id="UserJob" ng-model="usr.job" >
</div>
</div>
<div class="form-group">
<label for="UserAge" class="col-sm-3 control-label">Age</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="UserAge" placeholder="Age" ng-model="usr.age">
</div>
</div>
<div class="form-group">
<label for="UserSal" class="col-sm-3 control-label">Salary</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="UserSal" placeholder="Salary" ng-model="usr.sal">
</div>
</div>
<div class="form-group">
<label for="UserAddr" class="col-sm-3 control-label">Address</label>
<div class="col-sm-5">
<textarea rows="4" name="UserAddr" id="UserAddr" placeholder="Address" class="form-control" ng-model="usr.addr" ></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" type="submit">Add User</button>
</div>
</form>