TypeError: Cannot read property 'getPictures' of undefined

Question

It's an ionic app with $cordovaImagePicker and $cordovaCamera functions in the same controller and both called from the same reservation.html This is the controller definition:

.controller('AppCtrl', ['$scope', '$timeout', '$ionicModal', '$localStorage', '$cordovaCamera', '$ionicPlatform', '$cordovaImagePicker', function($scope, $timeout, $ionicModal, $localStorage, $cordovaCamera, $ionicPlatform, $cordovaImagePicker){

I installed $cordovaImagePicker using ionic plugin add cordova-plugin-imagepicker and $cordovaCamera using ionic plugin add cordova-plugin-camera

This is the controller code:

$ionicPlatform.ready(function() {
            var options1 = {
                quality: 50,
                destinationType: Camera.DestinationType.DATA_URL,
                sourceType: Camera.PictureSourceType.CAMERA,
                allowEdit: true,
                encodingType: Camera.EncodingType.JPEG,
                targetWidth: 100,
                targetHeight: 100,
                popoverOptions: CameraPopoverOptions,
                saveToPhotoAlbum: false
            };

            $scope.takePicture = function() {
                $cordovaCamera.getPicture(options1).then(function(imageData) {
                    $scope.registration.imgSrc = "data:image/jpeg;base64," + imageData;
                }, function(err) {
                    console.log(err);
                });

                $scope.registerform.show();
            };

            var options2 = {
                maximumImagesCount: 1,
                width: 800,
                height: 800,
                quality: 80
            };
            $scope.getPicture = function() {
                $cordovaImagePicker.getPictures(options2).then(function (results) {
                    for (var i = 0; i < results.length; i++) {
                        console.log('Image URI: ' + results[i]);
                        $scope.registration.imgSrc = results[i];
                    }
                }, function(error) {
                    // error getting photos
                    console.log(error);
                });
            };
        });
    }])

I'm running the app on an android 5 phone. The takePicture function works perfectly. The getPicture function does not work.

The devTools console shows:

TypeError: Cannot read property 'getPictures' of undefined
    at Object.getPictures (file:///android_asset/www/lib/ngCordova/dist/ng-cordova.js:4420:28)
    at Scope.$scope.getPicture (file:///android_asset/www/js/controllers.js:132:37)
    at fn (eval at <anonymous> (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:26457:15), <anonymous>:4:221)
    at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:62386:9
    at Scope.$eval (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:29158:28)
    at Scope.$apply (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:29257:23)
    at HTMLButtonElement.<anonymous> (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:62385:13)
    at HTMLButtonElement.eventHandler (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:16583:21)
    at triggerMouseEvent (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:2948:7)
    at tapClick (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:2937:3) 

The error seems to be saying that getPictures is in the scope of Scope.$scope.getPicture but that's not how the code is organised. I've tried uninstalling and reinstalling $cordovaImagePicker but no change.

Answer 1

After hours of searching for an answer I found this link

https://github.com/ratkop/-cordova-imagePickerEx/issues/8

and reinstalled imagePicker with this :

ionic plugin add https://github.com/b-alidra/-cordova-imagePickerEx.git --save

and it now works without any errors.