Jquery + Angular form do not pass an input value

Question

I’m doing a post with Angular. It works normal when I manually type the values in the form, but it gets a value via jQuery $("#id_veiculo").val(valores02.id); and this value appears correctly, but when sending the value of this input ends up disappearing.

Follows code: http://pastebin.com/jJ4k2TkT

<form class="form-inline" ng-controller="FormController" ng-submit="submitForm()" role="form" method="post">
    <input type="text" class="form-control" id="id_veiculo" ng-model="id_veiculo" value="">  <!-- Esta input só funciona quando digito manualmente o valor, ela recebe por jquery mas na hora de enviar se torna vazia ou nula -->
    <div class="form-group">
        <label class="sr-only">Itens Opcionais:</label>

        <?php
        echo ' <select ng-model="id_opcional">';

        foreach ($opcionais_encontrados as $o):
            echo '<option value="' . $o->id . '">' . $o->opcional . '</option>';
        endforeach;
        echo '</select>';
        ?>
    </div>

    <button type="submit" class="btn btn-default btn-primary">Submit Record</button>
    <pre style="display:none;">{{ message}}</pre>
</form>

the app.js

'use strict';

(function(){
var HC = {};
var App = angular.module('myApp', ['ui.bootstrap']);
var $scope;

HC.FormController = function($scope, $http) {
    $scope.id_veiculo = undefined;
    $scope.id_opcional = undefined;
    $scope.message = undefined;

    $scope.submitForm = function() {        
        $http({
            method: 'POST',
            url: 'http://cipauto/painel/opcionais/add',
            headers: {
                "Content-Type" :  "application/json"
            },
            data: JSON.stringify({id_veiculo: $scope.id_veiculo, id_opcional: $scope.id_opcional})
        }).success(function(data){                              
            var scope = angular.element(document.getElementById("table")).scope();
            scope.rows.push({id_veiculo: $scope.id_veiculo, id_opcional: $scope.id_opcional});
            $scope.rows = scope;
            //alertify.notify(data.message, data.status, 5, function() { console.log(data.message); });
        });
    }
};


HC.TableViewController = function($scope, $http) {
    $http({
        method: 'POST',
        url: 'http://cipauto/painel/opcionais/listAll',
        headers: {"Content-Type":"application/json"},
    }).success(function(data){
        $scope.rows = data;
    });
};

App.controller('TableViewController', HC.TableViewController);
App.controller('FormController', HC.FormController);

return HC;

})();

From what I understand the problem must be in $scope.id_veiculo = undefined;. How do I add input value #id_seminovo which is assigned by the jQuery cited above.

Answer 1

Use the angular itself to define the value of the id_vehicle field.

//recupera o scopo do angular
var scope = angular.element('[ng-controller=FormController]').scope();
//define o valor
scope.test2 = 'id_veiculo';
//faz o apply no scope para poder atualizar o valor definido acima na pagina, ou seja, fazer o bind
scope.$apply();

Explanatory example

Remembering that this form is not so used, but breaks a branch for what you want. The ideal was to better understand how your application works to try to handle this directly in the controller, for example.