<embed> tag requires refresh to set src

Question

So i'm trying to get some pdf/jpg files from database and show it in a popup. i use <embed> tag to show files in my html but for the first time the popup doesnt load(or show idk) and i have to refresh my popup to show the files. why is this happening?!

HTML:

<div ng-init="myVisa">
    <div class="popup" dx-popup="popupOptions1">
        <div data-options="dxTemplate:{ name:'certi' }">
            <div class="form-group row" style="text-align:center;">
                <embed id="img1" src="" width="800px" height="500px" />
            </div>
            <div class="form-group row" style="text-align:center;">
                Approve the information :
                <input type="checkbox" ng-model="myVisa.CheckBox" />
            </div>
            <div ng-show="myVisa.CheckBox" style="text-align:center;" class="form-group row">
                <button class="btn btn-success" ng-click="onDownloadCertificate(myVisa.VisaReqId)">Download</button>
            </div>

        </div>
    </div>
</div>

JavaScript:

$scope.myVisa = {};
$scope.visiblePopup1 = false;

$scope.onShowCertificate = function(e) {
  debugger;
  var id = e.key.VisaReqId;
  var url = "/UploadFile/ShowVisaAproveFile/?id=" + id;
  $http.get("/api/VisaRequest/GetVisaRequetInfo/?id=" + id).then(function(res) {
    debugger;
    $scope.myVisa = res.data;
    $("#img1").attr("src", url + "#toolbar=0");
    $scope.visiblePopup1 = true;
  });
};

Answer 1

so the problem was that img data didnt load by the time that popup opened up. so i tried to set img src in onShowing event in popup so i get the image on showing.