angularjs with angular-ui modal form - angularjs

Question

Hi i am beginner for angularJS and i am showing angular-ui modal form when click on button and have to add new user but i am really confusing how to handle and how to do this scenario and i tried below code but its not working can some one help me better way to do this
My requirement i want to open modal form for adding new user and when i click save button i need to add that new user in my array
main.js
// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);
// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myController', ['$scope', '$uibModal', '$log',
function ($scope, $uibModal, $log) {
$scope.newUser = {};
$scope.info = "";
$scope.users = [
{ username: "rimon", fullName: "Md. Mamunur Rashid Rimon", email: "rimonmath#gmail.com" },
{ username: "shamim", fullName: "Md. Tamim Hossain", email: "shamim#gmail.com" },
{ username: "tamim", fullName: "Tamim Iqbal", email: "tamim#gmail.com" }
];
$scope.addUser = function () {
var modalInstance = $uibModal.open({
templateUrl: 'add_user.html',
controller: 'ModalInstanceCtrl',
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
$scope.saveUser = function () {
console.log("Saving...");
$scope.users.push($scope.newUser);
$scope.info = "New User Added Successfully!";
$scope.newUser = {};
};
$scope.selectUser = function (user) {
$scope.clickedUser = user;
};
$scope.deleteUser = function () {
console.log($scope.users.indexOf($scope.clickedUser));
$scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
$scope.info = "User Deleted Successfully!";
};
$scope.clearInfo = function () {
$scope.info = "";
};
}]);
angular.module('myApp').controller('ModalInstanceCtrl', function ($scope,$uibModalInstance) {
$scope.saveUser = function () {
alert("You clicked the ok button.");
$uibModalInstance.close();
};
$scope.close = function () {
alert("You clicked the cancel button.");
$uibModalInstance.dismiss('cancel');
};
});
Form.html
<div>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New User Registration</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Username" ng-model="newUser.username">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Email" ng-model="newUser.email">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Full Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Full Name" ng-model="newUser.fullName">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="saveUser();">Save</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="close()">Close</button>
</div>
</div>

Answer 1

From what I see, your problem lies in your declaration of FormController.js please try to change this code :
app.controller('ModalInstanceCtrl', ['$scope','$modalInstance',function ($scope, $modalInstance) {
$scope.close = function () {
$modalInstance.dismiss('cancel');
};
$scope.saveUser = function(){
//SUBMIT FORM HERE
}
}]);
for this one :
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, data)
{
var pc = this;
pc.data = data;
pc.ok = function () {
//{...}
alert("You clicked the ok button.");
$uibModalInstance.close();
};
pc.cancel = function () {
//{...}
alert("You clicked the cancel button.");
$uibModalInstance.dismiss('cancel');
};
});
From your code I noticed that:
Your declaration of the modal controller misses the name of the main module app which sometimes is required.
you are using '$modalInstance' instead of $uibModalInstance
For further reference go here. Please try these changes and let me know if it works!