AngularJS > Bootstrap UI > Editing Item in Modal - angularjs

Question

I'm working on a project that makes sense to add and edit items within a modal window. The add portion is working fine. The edit portion is opening the modal but my ng-model is not reflecting and the input fields are blank within the modal window.
Here's a plunker to illustrate the issue:
http://plnkr.co/edit/8mHOo0YE4qv0UcDvCCgS?p=preview
AngularJS Code:
// Code goes here
var userPopup = angular.module('userPopup', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
userPopup.controller('popupController', function($scope, $uibModal, $log) {
$scope.users = [{
name: 'Steve',
job: 'Accounting',
age: '39',
sal: '36000',
addr: '123 Streetly Unit 2, Chicago, IL 60601'
}];
$scope.editUser = function(user) {
var dialogInst = $uibModal.open({
templateUrl: 'edit.html',
controller: 'editDialogInstCtrl',
size: 'lg',
resolve: {
selectedUser: function() {
return $scope.user;
}
}
});
};
$scope.addUser = function() {
var dialogInst = $uibModal.open({
templateUrl: 'popup.html',
controller: 'DialogInstCtrl',
size: 'lg',
resolve: {
selectedUser: function() {
return $scope.user;
}
}
});
dialogInst.result.then(function(newuser) {
$scope.users.push(newuser);
$scope.user = {
name: '',
job: '',
age: '',
sal: '',
addr: ''
};
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
userPopup.controller('DialogInstCtrl', function($scope, $uibModalInstance, selectedUser, $log) {
//Assign Selected User
$scope.user = selectedUser;
$scope.submitUser = function() {
$uibModalInstance.close($scope.user);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
userPopup.controller('editDialogInstCtrl', function($scope, $uibModalInstance, selectedUser, $log) {
//Assign Selected User
$scope.user = selectedUser;
$scope.save = function() {
$uibModalInstance.close($scope.user);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
HTML Code:
<a class="btn btn-link" ng-click="editUser(selectedUser)">Edit</a>
I know it's close and I'm overlooking something. Please advise.
thank you

Answer 1

You have two issues, that are just typos, really.
In your JS code:
// passing `user` here
// v
$scope.editUser = function(user) {
var dialogInst = $uibModal.open({
/* ... */
resolve: {
selectedUser: function() {
return $scope.user;
} // ^
} // using $scope.user there
});
};
You're passing an argument to the editUser function, but not actually using it; referring instead to $scope.user, which is undefined.
It should be: selectedUser: function() { return user; }
In your HTML template:
<!-- declaring `user` here -->
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.job}}</td>
<td>{{user.age}}</td>
<td>{{user.sal | currency}}</td>
<td>{{user.addr}}</td>
<!-- using `selectedUser` there -->
<td><a class="btn btn-link" ng-click="editUser(selectedUser)">Edit</a></td>
</tr>
You're iterating over users, using a user variable; then referring to a (non-existent) selectedUser when calling editUser.
It should be: <a class="btn btn-link" ng-click="editUser(user)">Edit</a>
Here's a link to a (working) fork of your plunk.

Answer 2

You need to change this code in your view.
replace this code
<td><a class="btn btn-link" ng-click="editUser(selectedUser)">Edit</a></td>
to
<td><a class="btn btn-link" ng-click="editUser(user)">Edit</a></td>
and in your controller when invoke the modal.. change
$scope.editUser = function(user) {
var dialogInst = $uibModal.open({
templateUrl: 'edit.html',
controller: 'editDialogInstCtrl',
size: 'lg',
resolve: {
selectedUser: function() {
return $scope.user;
}
}
});
};
to
$scope.editUser = function(user) {
var dialogInst = $uibModal.open({
templateUrl: 'edit.html',
controller: 'editDialogInstCtrl',
size: 'lg',
resolve: {
selectedUser: function() {
return user;
}
}
});
};