Loading files inside object tag - html5

I'm loading different file types inside an <object> tag, one by one, by a button click. The file types are - html, img & pdf . The file names are stored in an array.

If there is an img file after the pdf , it does not load. Only html files load after the pdf will load.

Using AngularJs to perform the actions.

HTML:

<button ng-disabled="fileCount()" ng-click="showNextSlide()">Next</button>
<object class="objView" data="{{fileSource}}" type="{{fileType}}"></object>

JS:

var app = angular.module("feedboxApp", []);

    app.controller("ctrl", function ($scope) {

    $scope.fileSource = "";
    $scope.fileType = "";
    $scope.projectfiles = [
        { src: "page1.html", type: "text/html" },
         { src: "1.jpg", type: "image/jpeg" },
        { src: "page2.html", type: "text/html" },        
        { src: "tracker.pdf", type: "application/pdf" },
        { src: "2.jpg", type: "image/jpeg" }
    ];

    $scope.fileCount = function () {
        return $scope.projectfiles.length > 1 ? false : true;
    }

    var i = 0;
    $scope.showNextSlide = function () {
        if (i + 1 >= $scope.projectfiles.length) {
            i = 0;
        }
        else {
            i = i + 1;
        }        
        $scope.embedFile(i);
    }    

    $scope.embedFile = function (i) {
        $scope.fileSource = $scope.projectfiles[i].src;
        $scope.fileType = $scope.projectfiles[i].type;
    }

    $scope.embedFile(0);
});

The page first loads with 'page1.html' as desired. On button click, it loads, 1.jpg' and so on till tracker.pdf. If I click on the button now, it does not load 2.jpg. When I see the html, it shows data="2.jpg" though.

If I put a html file instead of 2.jpg in the array, it loads fine on button click, after pdf.

Can the <object> not load an image file after it has a pdf file.