How to use Croppie(web image croping tool)

Hello guys. Please i came across Croppie as a tool that fits well into a project i am working on. After setting Croppie up i was able to successfully able to view any image i need to crop, but the moment an image is selected from the system, the cropping effect takes place so attempting to crop the image subsequently does not work and when the copped image is displayed it shows the part of the image that was cropped the moment the image was loaded, here is my code.

  $scope.submitImage = function(){
             $('#myImage').attr('src', source);
         }

var source = "";

var docrop = function(imgsrc){
var vanilla = new Croppie(document.getElementById('item'),{
                viewport: {
                    width: 80,
                    height: 80,
                    type: 'circle'
                },
                boundary: {
                    width: 400,
                    height: 400
                }
            });

            vanilla.bind(imgsrc).then(function() {
                vanilla.result('canvas','original').then(function (src) {
                                source = src;
                });
            });

         }

Thanks for any help provided.