AngularJS UI Bootstrap Modal passing object to controller

Question

I'm trying to pass an object to the modal controller with resolve but it doesn't appear to pass correctly. I can console.log the object fine right before I pass it, but trying to log it in the modal controller just shows it is undefined. I've looked at other related questions but I can't see what I'm doing differently from the answers they've been given. Here's my controllers:

app.controller('BlogController', ['$scope', '$http', '$modal', function($scope, $http, $modal){

    $scope.blogEntry = {}; // Place holder for data (blog entry)

    $scope.editBlogEntry = function(blogEntry) {
        $scope.blogEntry = blogEntry;
        $scope.editModal = $modal.open({
           templateUrl: '/resources/partials/editBlogModal.html',
            controller: 'EditBlogController',
            size: 'lg',
            resolve: {
                blogEntry: function() {
                    console.log($scope.blogEntry);  //this shows the object
                    return $scope.blogEntry;
                }
            }
        });
    };
}]);

app.controller('EditBlogController', ['$scope', '$http', '$modalInstance', function($scope, $http, $modalInstance, blogEntry){
    $scope.blogEntry = blogEntry;
    console.log($scope.blogEntry);  //undefined
}])

Can anyone see what I'm missing? Really appreciate the help!

Answer 1

You forgot to add blogEntry as the last string in the array passed to the modal controller.

app.controller('EditBlogController', ['$scope', '$http', '$modalInstance', function($scope, $http, $modalInstance, blogEntry)
                                                                     HERE ^

Do yourself a favor, and use ng-annotate , which will remove the need for this ugly array syntax, and thus avoid those kinds of bugs.