I have three different controllers and views

From Screen when button is clicked Modal1 opens

$modal.open({
    templateUrl: 'abc.html',
    controller: 'abcCtrl',
    size: 'lg',
    scope: $scope,
});


In modal1 there is next button so on Click of Next Button Want to close Modal1 and open Modal2

$scope.validate = function(isValid) {
    if (!isValid) {
        $scope.errors = 'Please fill-up required fields';
    } else {
        $scope.errors = '';
        $modal.open({
            templateUrl: 'Payment.html',
            controller: 'PaymentCtrl',
            size: 'lg',
            scope: $scope,
        });
    }
};


In modal2 there is next button so on Click of Next Button Want to close Modal2 and open Modal3

$scope.placeOrder = function() {
        $scope.cart.abc().then(function(result) {
                $modal.open({
                    templateUrl: 'orderSummary.html',
                    controller: 'SummaryCtrl',
                    size: 'lg',
                    scope: $scope,
                    resolve: {
                        items: function() {
                            return result.data;
                        }
                    }
                });
            },
            function(err) {
                //error msg
            });
};


If I add $modalInstance.close to Modal1
while Opening another modal that is Modal2, Modal1 is Closed and Modal2 is Opened But none of the buttons work. Modal3 doesnt get opened Don't Know the actual issue what is happening.

Please help me. Thanks in advance.


Question: Photo icons have generic picture only
Answer: I found the answer. Simple and easy. Go into your pictures folder. After that, press view on the upper left and go to options. From there go to view and the first check box "Always show icons, never thumbnails" I going to be checked. Unchecked it and bam