How to pass data to an angular-foundation modal $s

Question

I am using angular-foundation and specifically the modal http://madmimi.github.io/angular-foundation/#/modal , i am confused in how to pass data to a modal while using one controller , i want to take an array value and update the modal to show a particular user info ,Ex: $scope.updateUserInfo = $scope.user[index] , the only issue is how to pass the data to the modal .

myApp.controller('users',function ($scope,$location,$http,$modal,msg) {
$http.get('api/v1/users')
.success(function (data,status) {
    $scope.user = data;
})
.error(function (data,status) {
    $location.path('/login');
});

$scope.showWrite = function () {
    $scope.write = true;
}

$scope.closeWrite = function () {
    $scope.write = false;
    $scope.newUser = '';
}

$scope.save = function () {
    $http.post('api/v1/users/store',$scope.newUser)
    .success(function (data,status) {

        $scope.user.unshift({
            id: data,
            first_name: $scope.newUser.first_name,
            last_name: $scope.newUser.last_name,
            email: $scope.newUser.email,
            role: $scope.newUser.role
        });

        $scope.write = false;
        $scope.newUser = '';
    })
    .error(function (data,status) {
        alert('failed');
    });
}

$scope.confirmDelete = function (index,id) {
    msg.confirmDelete().then(function(value) {
        $scope.text = msg.getText();
        $http.get('api/v1/users/destroy/'+id)
        .success(function  (data,status) {
            $scope.user.splice(index,1);
        })
        .error(function (data,status) {
            alert('Error : Operation failed');
        });
    });
}

$scope.showUserInfo = function () {

}

$scope.userUpdate = function () {

}


$scope.showUserUpdate = function (index) {
    $modal.open({
        templateUrl: 'partials/message/update.html',
        controller: 'users'
    });
}

});

Answer 1

To Pass the data to $modal you need to update your $modal function something like this:

$scope.showUserUpdate = function (popUpData) {
    var modalInstance = $modal.open({
        templateUrl: 'partials/message/update.html',
        controller: ['$scope', '$rootScope', '$modalInstance', 
        function($scope, $rootScope, $modalInstance) {
            $scope = angular.extend($scope, popUpData);
        }],
        resolve: {}
    });
    return modalInstance;
};

So popupData is the data which you want to pass to your modal. popupdata then will be merged with existing scope of that controller. Now you can access popupData keys in your HTML. Remember we are returning modal instance in this function so you can manually close the popup using this intance.

Answer 2

Other way is to use the resolve attribute and inject it to controller:

$scope.showUserUpdate = function (popUpData) {
    var modalInstance = $modal.open({
        templateUrl: 'partials/message/update.html',
        controller: ['$modalInstance', 'data', function($modalInstance, data) {
            data.popUpData = ...
        }],
        resolve: {
            data: popUpData
        }
    });
    return modalInstance;
};