Я хочу отобразить загруженное имя файла на HTML-странице

Question

1. У меня есть вложение в моем новом разделе сообщений, когда я нажимаю на это вложение, у меня появляется всплывающее окно с загрузкой файла, в моем новом сообщении
   Я хочу, чтобы отобразить это имя файла на странице нового сообщения HTML.

Вот мой файл app.js

function newMsgController($scope, $http,$ionicPopup, $rootScope, $location, message) {
    //alert($location.search().MID);
    //$scope.showErrorMessage = false;
    // $scope.upload = function(el) {
    // alert
    // };
    $scope.submit = function() {
        alert($("#FILEID").value);
        //$scope.showErrorMessage = false;
        message.newMessage(window.localStorage['token'], $scope.subject, $scope.body, $scope.image).success(function(data) {
            alert("Message Sucessfully Sent");
        });

    };
    $scope.data = {}

  // Triggered on a button click, or some other target
  $scope.showPopup = function() {
     var myPopup = $ionicPopup.show({
     template: '<input type="file"  name="file"  ng-model="data.image">',
     title: 'Browse the file',
     scope: $scope,
     buttons: [
       { text: 'Cancel' },
       {
         text: '<b>Upload</b>',
         type: 'button-positive',
         onTap: function(e) {
            alert(JSON.stringify(e));
           if (!$scope.data.image) {
            return $scope.data.image;
           } 
         }
       },
     ]
   });
   myPopup.then(function(res) {
     console.log('Tapped!', res);
   });
   $timeout(function() {
      myPopup.close(); //close the popup after 3 seconds for some reason
   }, 3000);
  };
};

Вот моя страница newMsg.html

<ion-header class="bar bar-header bar-balanced">
    <!-- <button class="button button-icon icon ion-navicon"></button> -->
    <a href="#/dashboard" class="button icon-left ion-chevron-left button-clear "></a>
    <!--<button class="button back-button button-icon icon ion-arrow-left-c button back-button button-icon icon ion-arrow-left-c" ng-click="goBack($event)" ng-class="{'hide': !backButtonEnabled}" icon="backIcon" label="backLabel" type="backType" ng-if="(backType || backLabel || backIcon)" style=""> </button>-->       
    <h3 style="margin-left: 4%; line-height: 0px;">Compose</h3>

</ion-header>
<div class="padding" >
    <ion-content class="content has-header ionic-pseudo" style="margin-top:19px">
        <div ng-controller="newMsgController">
            <form>
                <div class="col-md-12 violet">
                    <div class="col-md-4 col-xs-4"> <a href="#/myMessages">
                            <i class="icon ion-close-round"></i>
                            Discard
                        </a></div>
                    <div class="col-md-4 col-xs-4"> 
                    <a href="">
                           <i ng-click="showPopup()" class="icon ion-paperclip"> &nbsp;Attach</i>
                           </a>
                        </div>
                    <div class="col-md-4 col-xs-4"> <a href="" ng-click="submit()">
                            <i class="icon ion-paper-airplane"></i>
                            Send        
                        </a>
                    </div>
                    <div style="clear:both"></div>
                </div>
                <div class="list">
                    <label class="item item-input">
                        <input type="text" placeholder="Subject" ng-model="subject">
                    </label>
                    <label class="item item-input">
                        <textarea placeholder="Message" ng-model="body"></textarea>
                    </label>
                </div>
            </form>
        </div>
    </ion-content>
</div>
<div style="clear:both"></div>