Working with angular, bootstrap modal windows, how to work with AJAX correctly?

Question

JavaScript

Today I poked around angular and bootstrap to refactor my crutch to jquery.
Window button

<div ng-app="app" ng-controller="Ctrl">
      <button ng-click="open('view.html')">Open dialog</button>
 </div>

Calling my window:

angular.module('app', ['ui.bootstrap.dialog'])
        .controller('Ctrl', function($scope, $dialog, $window) {
            $scope.open = function(templateUrl) {
                var options = {
                    backdrop: true,
                    keyboard: true,                    
                    controller: 'DialogCtrl',
                    templateUrl: templateUrl
                };
                var dialog = $dialog.dialog(options);
                dialog.open().then(function(result) {
                    if (result === 1) {
                        $window.alert("OK pressed");
                        
                    }
                });
            };
        })
        .controller('DialogCtrl', function($scope, dialog) {
            $scope.close = function(result) {
                dialog.close(result);
            };
        });

There were 2 questions:
1) How to transfer data to templateUrl (that is, to the window template) ?. Well for example I want to transfer the title text.
2) How to use Ajax in a window, that is, for example, I opened a window with a form, entered data and I need to send this data to the server. Can I use the following construction inside the window:

// Assign handlers immediately after making the request,
            // and remember the jqXHR object for this request
            var jqxhr = $.ajax({
                type: 'POST',
                url:  '/backend/controller.php',
                data: {'action':'editCoord', 'coordId':coordId,  'x':x, 'y':y, 'fieldName':fieldName}
            }).success(function(responce) {

                var checkResponce = jQuery.parseJSON( responce );
                
                // Возникла ошибка
                if (typeof checkResponce.error !='undefined') {
                    $('.error').html(checkResponce.error).show(300);
                }else {
                    // Жадный рендер 
                    renderAll(false,responce);
                    // Закрыть все окна
                    $.arcticmodal('close');
                }
            })
            .fail(function() {
                console.log( "error" );
            })
            .done(function() {
                $('.load').hide();
            })

Or is it already provided somehow differently?
Please tell me how can I solve these issues, thanks in advance.

Answer 1

you have replaced caste with jquery guano with angular.js.
Never work with jquery or dom in a controller. There are directives for this.
Never work with $http in the controller, take it all into services.
The construction you provide is implemented approximately like this:

angular.module('app')
   .factory('myApiClient', function ($http, $q) {
       return {
            save: function (data) {
            
                 return $http({
                       method: 'POST',
                       url: 'some_url',
                       data: data
                 }).then(function (response) {
                     if (!response.data || response.data.error) {
                         return $q.reject();
                     }
                     
                     return response.data; // я не уверен надо ли вам это... сами решите
                 }, function () {
                     return $q.reject();
                 });
            } 
       }     
   })

   .controller('MyCtrl', function ($scope, myApiClient) {
       $scope.save = function () {
           myApiClient.save(...).then(function (data) {
                $scope.showResponse = true;
           }, function () {
                $scope.showResponse = false;
           })
       }
   });

And in the view you are already using directives that are tied to scope (ngHide / ngShow). You have to get the idea. The point is to reduce the coupling as much as possible. Otherwise, I don't see the point in using angular. And I have a suspicion that your task does not need angular.