Picklist (multi-select) Component does not update data. Bootstrap + Angularjs

Question

Good morning, I have a registration screen, a jsp with a modal where I implemented a picklist based on Bootstrap templates.

I need to select from my bank the companies (are doing this) on one side and move to the other side the selected ones (which does not), see image.

Angularjs controller:

BoxApp.controller("CadastroCertificadoController", function($scope, $http) {
    $scope.clientes = {};

    $scope.iniciar = function() {
        $http.get('/boxmlV2/cadastrocertificado').success(function(response) {
            $scope.clientes = response;
        });
    };

    $scope.iniciar();
});

My Component picklist in jsp:

<div class="form-group">
    <label class="control-label col-md-3">Empresas:</label>
    <div class="col-md-9">
        <select ng-model="certificadoIncluirAlterar.razaoSocial" multiple="multiple" class="multi-select" id="my_multi_select1" name="my_multi_select1[]">
            <option ng-repeat="c in clientes" value="{{c.idCliente}}">{{c.razaoSocial}}</option>
        </select>
    </div>
</div>

My Java Controller (only loads client table data on screen):

@Controller
public class CadastroCertificadoController {

    @Autowired
    private ClienteService clienteService;

    @RequestMapping(value = "/cadastrocertificado", method = RequestMethod.GET)
    public ModelAndView iniciar(ModelMap modelMap) {
        return new ModelAndView("cadastrocertificado");
    }

    @RequestMapping(value="/cadastrocertificado", method=RequestMethod.GET, produces={"application/json"})
    public @ResponseBody List<ClienteDTO> obterTodos(ModelMap modelMap){
        return clienteService.obterTodos();
    }
}

I don’t know what might be going on, any help is valid. Thank you.

Mocked data, works this way:

                                                <select ng-model="certificadoIncluirAlterar.razaoSocial" multiple="multiple" class="multi-select"
                                                id="my_multi_select1" name="my_multi_select1[]">
                                                <option>Teste 1 </option>
                                                <option>Teste 2 </option>
                                                <option>Teste 3 </option>
                                                <option>Teste 4 </option>
                                                <option>Teste 5 </option>
                                                <option>Teste</option>                                                  <
                                                <option selected>Teste 6</option>
                                                <option selected>Teste 7</option>

                                                </select>

Answer 1

Well, the dice manipulation esquerda <-> direita is relatively simple.

In theory you need to do the following:

1. Have an empty array;
2. Have a function to receive the selected company and move to the right;
3. This function will receive the data and add to the new array, which was previously empty;
4. A part function to do Submit sending the data you need;

To create the empty array, I recommend doing it as follows:

$scope.novaLista = [];
$scope.novaLista['listaSeleciona'] = {};
var newArray; //vamos usar isso posteriormente

This way you will have a 'nested-array' being able to send other data together, if you know how an array works, you will understand perfectly.

To add it, just use the following method:

$scope.novaLista['listaSeleciona'].push('newArray');

So you will insert the variable newArray within that list, which was reserved to display the companies that will be selected

Now to generate the data to be entered, let’s assume that your list of companies is like this:

$scope.empresas = [
    {id:1, razao: 'Empresa ME', tel: '9966-5588'},
    {id:2, razao: 'Negócio ME', tel: '9966-5588'},
    //...
];

You now need to select the company you want to add, and call the function to do this, which would be assigned to the button that is between the two columns.

$scope.adicionarEmpresa = function(data) {
    newArray = {id: data.id, razao: data.razao}; //Assim você seleciona só os campos que deseja. Conseguiu entender a lógica?
    $scope.novaLista['listaSeleciona'].push('newArray'); //Insere o novo objeto;
};

To determine which object is selected, you can do so (I have not tested this, so test before):

<option ng-click="meuElemento = c" ng-repeat="c in clientes" value="{{c.idCliente}}">{{c.razaoSocial}}</option>

And the button to call the function to add the company use:

<button ng-click="adicionarEmpresa(meuElemento)">Adicionar</button> //é o botão com a seta dupla que tem na sua imagem

This is the general logic, now you need to apply to your model, because you have other data and even an input of sending files.