AngularJS: Passing data to modal from list - angularjs

Question

I am currently learning how to build a MEAN webapp from scratch. Stuff goes quite well until this point but now i am stuck at trying to pass data from my list (ng-repeat) to my modal via ng-click=updatePerson(person). I have absolutely no clue why I can't access the data from the list. I tried like 20 variants to link the data between both scopes without any success.
This is my Controller:
angular.module('userCtrl', ['userService','ui.bootstrap'])
.controller( 'userController', function(User, $uibModal, $log, $scope) {
var vm = this;
User.all().success( function(data) {
vm.users = data;
})
vm.deleteUser = function(id) {
User.delete(id).success(function(data) {
User.all().success(function(data) {
vm.users = data;
});
});
};
vm.createUser = function() {
User.create(vm.userData).success(function(data) {
vm.userData = {};
User.all().success(function(data) {
vm.users = data;
});
});
};
vm.updateUser = function(selectedUser) {
$scope.selectedUser = selectedUser;
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'app/views/pages/modal.html',
resolve: {
user: function () {
return $scope.selectedUser;
}
}
});
modalInstance.result.then(function(selectedUser) {
$scope.selected = selectedUser;
});
};
});
My angular-router:
angular.module('appRoutes', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'app/views/pages/home.html',
controller : 'userController',
controllerAs : 'user'
})
.when('/users', {
templateUrl : 'app/views/pages/user.html',
controller : 'userController',
controllerAs : 'user'
});
$locationProvider.html5Mode(true);
});
My list:
<div class="btn-group">
<button type="button" class="btn-lg btn-default glyphicon glyphicon-plus" data-toggle="modal" data-target="#createModal"></button>
<table class="table table-nonfluid table-bordered table-striped" ng-show="user.users">
<thead>
<tr>
<th></th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in user.users">
<td><button ng-click="user.deleteUser(person._id)" class="btn btn-default btn-lg glyphicon glyphicon-trash"></button></td>
<td>{{person.firstname}}</td>
<td>{{person.lastname}}</td>
<td>{{person.mail}}</td>
<td><button ng-click="user.updateUser(person)" class="btn btn-default btn-lg glyphicon glyphicon-trash"></button></td>
<!--<td><button class="btn-lg btn-default glyphicon glyphicon-option-horizontal" data-toggle="modal" data-target="#updateModal"></button> </td>-->
</tr>
</tbody>
</table>
<!--Create Modal-->
<div class="modal fade bs-example-modal-lg" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Neue Person</h4>
</div>
<form id="form1" ng-submit="user.createUser()">
<div class="modal-body">
<div class="form-group">
<label for="recipient-name" class="control-label">Vorname</label>
<input type="text" class="form-control" ng-model="user.userData.firstname">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Nachname</label>
<input type="text" class="form-control" ng-model="user.userData.lastname">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">E-Mail</label>
<input type="text" class="form-control" ng-model="user.userData.mail">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
<button id="button1" type="submit" class="btn btn-primary">Person erstellen</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#button1').click(function() {
$('#createModal').modal('hide');
});
</script>
And here is my modal:
<div class="modal-content bs-example-modal-lg" role="dialog document">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Ändere Person</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="recipient-name" class="control-label">Vorname</label>
<input type="text" class="form-control" ng-model="person.firstname" placeholder={{person.firstname}}>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Nachname</label>
<input type="text" class="form-control" ng-model="person.firstname" placeholder={{person.lastname}}>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">E-Mail</label>
<input type="text" class="form-control" ng-model="person.firstname" placeholder={{person.mail}}>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
<button id="button1" type="submit" class="btn btn-primary">Person ändern</button>
</div>
</div>

Answer 1

The user you're resolving won't be bound to the view automatically. You need a controller to do that. You can use the code below, or you can use controllerAs, but you'd have to update the modal's HTML accordingly.
vm.updateUser = function(selectedUser) {
$scope.selectedUser = selectedUser;
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'app/views/pages/modal.html',
resolve: {
user: function () {
return $scope.selectedUser;
}
},
controller: function($scope, user) {
$scope.user = user;
}
});
modalInstance.result.then(function(selectedUser) {
$scope.selected = selectedUser;
});
};