Picklist (multi-select) component does not update data. BootStrap component + AngularJS

I have a project based on JSP + AngularJS.

In my JSP, I have a picklist component provided by a bootstrap template. I am receiving data from my DB, the name os the companies I need to work with, but I still can not "pass" the ones I choose to the side of the selected ones. check image to understand. Any information would be helpful. Thanks.

enter image description here

My 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 in my jsp page:

<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 (just bring data from my DB filling a previous table)

@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();
    }
}

8 thoughts on “Picklist (multi-select) component does not update data. BootStrap component + AngularJS”

Leave a Comment