The select value is not sent, what do you think?

Question

JavaScript

The bottom line is that select is not sent, more precisely sent, but only if it is selected after filling all the inputs. I tried to fix it myself - I couldn’t, I’ve been familiar with c js and in particular with angular not so long ago. I think I messed up with the controllers.
new_ticket.html:

<div class="inmodal">
    <div class="modal-header">
        <i class="fa fa-envelope modal-icon"></i>
        <h4 class="modal-title">Новое обращение</h4>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <label for="ticketSubject">Тема</label>
            <input class="form-control" type="text" ng-model="ticketData.subject" id="ticketSubject">
        </div>
        <div class="form-group" ng-controller="ServicesCtrl">
            <label for="ticketService">Услуга</label>
            <select class="form-control" ng-model="ticketData.service" id="ticketService"
                    ng-options="opt.id as opt.id for opt in services">
                <option value="">Выберите услугу</option>
            </select>
        </div>
        <div class="form-group">
            <label for="ticketMessage">Сообщение</label>
            <textarea class="form-control" id="ticketMessage" ng-model="ticketData.message"></textarea>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-white" ng-click="cancel()">Закрыть</button>
        <button type="button" class="btn btn-primary" ng-click="send_ticket()">Отправить</button>
    </div>
</div>

function MainCtrl() {

    this.userName = 'Example user';

}

angular
    .module('example')
    .controller('MainCtrl', MainCtrl)
    .controller('ModalCtrl', ModalCtrl)
    .controller('LastNewsCtrl', function($scope, $http) {
        $http.get('/links/lastnews')
            .success(function(data) {
                $scope.news = data;
            });
    })
    .controller('ServicesCtrl', function($scope, $http) {
        $http.get('/links/services')
            .success(function(data) {
                $scope.services = data;
            });
    })
    .controller('TicketsCtrl', function($scope, $http) {
        $http.get('/links/tickets')
            .success(function(data) {
                $scope.tickets = data;
            });
    });

function ModalCtrl($scope, $modal) {

    $scope.new_ticket = function() {
        var modalInstance = $modal.open({
            templateUrl: 'views/modals/new_ticket.html',
            backdrop: 'static',
            keyboard: false,
            controller: ModalInstanceCtrl
        });
    };

    $scope.tos = function() {
        var modalInstance = $modal.open({
            templateUrl: 'views/modals/tos.html',
            backdrop: 'static',
            keyboard: false,
            controller: ModalInstanceCtrl
        });
    };

}

function ModalInstanceCtrl($scope, $modalInstance, $http) {

    $scope.ok = function() {
        $modalInstance.close();
    };

    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };

    $scope.send_ticket = function() {
        $http.post('http://example.com/request_test.php', $scope.ticketData)
    };

}

Answer 1

Naturally, you don't set the default value for $scope.ticketData.service in your ServicesCtrl controller, like so:

.controller('ServicesCtrl', function($scope, $http) {
        $http.get('/links/services')
            .success(function(data) {
                $scope.services = data;
                $scope.ticketData.service = $scope.services[0].id;
            });
    })