onsen ui:访问ons对话框's父页中的DOM元素

我在空闲时间看了教程，成功地构建了一个合理的应用程序，但我一直无法在ons对话框中访问（或知道是否可以访问）DOM元素。

我正在为从相机拍摄的图像构建图像上传功能。在点击父页面上的捕获按钮并通过相机进行捕获（在此阶段之前，相机工作正常）后，我希望图像显示在ons对话框中，用户可以在上传图像之前在其中放置标题、标签等。

这是我的代码：

在主页控制器内处理"捕获"按钮的父页面上：

var uploadImageDialog_var = ""; // global variable in js file outside HomepageController definition
// ...
// access camera, capture pic, go to success function with captured image data:
// ...
function onCaptureSuccess(data) {
    ons.createDialog('upload_image_dialog.html', {parentScope: $scope}).then(function(dialog) {
        uploadImageDialog_var = dialog;
        uploadImageDialog_var.show();
    });
    var viewport = document.getElementById('viewport'); 
    document.getElementById("test_img").src = "data:image/jpeg;base64," + data; <------ THIS LINE
    console.log(document.getElementById('test_img').src);
};

在html端，"viewport"是ons对话框上的div：

<ons-template id="upload_image_dialog.html" var="uploadImageDialog" ng-controller="HomepageController">
    <ons-dialog cancelable><!-- animation-options="{duration: 0.2, delay: 1, timing: 'ease-in'}">-->
        <div class="list__item list__item center" style="opacity: 0.4; border-bottom: 1px solid #0d96d7" > Tag My Upload </div>
        <div id="viewport" class="" style="width: 300px; height:300px">
            <img style="" id="test_img" src="" />   
        </div>
        <br/> <br/><br/> 
        <ons-button class="center" modifier="large"  ng-click="uploadPictureOK()">Upload!</ons-button>
    </ons-dialog>
</ons-template>

上面js中的document.getElementById（"test_img"）看起来正在工作，当我console.out它时，对test_img的src的更改会显示出来，但实际对话框显示的是旧的伪图像。

如果我需要更好的解释/提供，请让我知道，如果这是微不足道的，请原谅我。