отправлять несколько данных изображения с помощью текстового поля с углового контроллера

Я хочу отправить несколько данных изображения с текстовым полем на стороне сервера (PHP). Я сделал несколько загрузок изображений, но я не могу отправлять свои данные на сервер при отправке формы.

<form ng-submit="save()"><input type="file" file-upload multiple> <div ng-repeat="step in files"> <img ng-src="{{step}}" />{{step.name}} <input type="text" ng-model="comments"> </div> <input type="submit"></form> 

в моем контроллере

 app.directive('fileUpload', function() { return { scope: true, //create a new scope link: function(scope, el, attrs) { el.bind('change', function(event) { var files = event.target.files; //iterate files since 'multiple' may be specified on the element for (var i = 0; i < files.length; i++) { //emit event upward scope.$emit("fileSelected", { file: files[i] }); } }); } }; }); app.controller('mainCtrl', function($scope) { $scope.files = []; $scope.$on("fileSelected", function(event, args) { var item = args; $scope.files.push(item); var reader = new FileReader(); reader.addEventListener("load", function() { $scope.$apply(function() { item.src = reader.result; }); }, false); if (item.file) { reader.readAsDataURL(item.file); } }); }); 

когда я нажимаю кнопку отправки, я хочу отправить имя изображения с соответствующими комментариями для изображения. Как я могу отправить данные через api cal для php.in мой код функции save () выглядит ниже

 $scope.save = function() { console.log($scope.files)console.log($scope.comments) } 

    вам нужно использовать службу $http для отправки изображений на сервер

     $scope.save = function() { var fd = new FormData(); fd.append('file', $scope.files); $http.post('uploadUrl', fd, { transformRequest: angular.identity, headers: { 'Content-Type': undefined } }) .then(function(response) {}) .catch(function(response) {}); }