How to pass value from jQuery to AngularJS?

Question

JavaScript

I have a script for uploading photos to the server, it works on JQuery + PHP. Started writing a script to manage ad units on the site. I applied AngularJS, everything works well, information from the fields is removed and stored in an array, but I ran into a problem: how to pass the name of the uploaded image to AngularJS in order to add it to the array to the rest of the information?

<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
                             <div id="image_preview"><img id="previewing" src="images/noimage.png" /></div>
                             <input type="text" id="img_name" ng-model="imgUpl">
                                <div id="selectImage"><br/>
                                    <input type="file" name="file" id="file" required/>
                                    <input type="submit" value="Завантажити" class="enjoy-css-button-center" />
                                    
                                    <h4 id='loading' style="display:none;">loading...</h4>
                            	<div id="message"></div>
                                </div>

jquery (upload)

$(document).ready(function (e) {
  $("#uploadimage").on('submit',(function(e) {
    e.preventDefault();
    $("#message").empty(); 
    $('#loading').show();
    $.ajax({
        	url: "ajax_php_file_advert.php", 
      type: "POST",      				
      data:  new FormData(this), 		
      contentType: false,       		
    	                cache: false,					
      processData:false,  	
      success: function(data)  
        {
      $('#loading').hide();
      $("#message").html(data);
      $('#img_name').val(data);			
        }	        
     });
  }));

AngularJS (App)

var settingsModule = angular.module('settingsModule',['firebase']);

settingsModule.controller('MainCtrl',['$scope','$firebase',function($scope,$firebase){
  $scope.typeBanner='video';
  
  $scope.banner = [
    {
      name:'First',
      types: $scope.typeBanner,
      image: 'none'
    }
  ];
  
  $scope.save = function() {
    $scope.banner.push({
      name:$scope.nameBanner,
      types:$scope.typeBanner,
      image:$scope.imgUpl
    });
  };
}]);

Answer 1

If you are using Angular, then forget about jquery. Write a service in Angular, send/receive data via $http. Or ditch angular and just use jquery with something else. The current option is unnecessary crutches.