Home Ask Login Register

Developers Planet

Your answer is one click away!

B.J. A.A. February 2016

Chosen select work on chrome but not firefox/IE

I load options from a database into a chosen select with angularjs, the code works as expected on chrome browsers but on firefox or internet explorer the code doesn't load the options.

I tried to switch from a directive to the angular chosen library, this one works on all browser but the ng-change doesn't triggers the function associated to the event.

This is my original code(work on chrome only): HTML

       <select ng-model="addCapas" ng-change="aplicarFiltro()" 
            multiple class="control-group html-multi-chosen-select" 
            multiple="multiple" chosen style="width: 100%;">

      <option ng-repeat="filt in filtros"  value={{filt.nombre}}>{{filt.nombre}}</option>                       


the js file:

App.directive('chosen', function($timeout) {
    var linker = function(scope, element, attr) {

        scope.$watch('', function() {
            $timeout(function() {
            }, 0, false);
        }, true);
        $timeout(function() {
        }, 0, false);
    return {
        restrict: 'A',
        link: linker

the part i load the options on the select:

App.controller("appCtrl", function ($http,$scope) {

    $http({url: "/ewisemaps/catalogoComp",
        data: $.param({
            catalogo: "Capas",
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
    }).success(function (res) {

            $scope.filtros = [];
            $scope.capas = [];
            $scope.addTipolog = [];
            angular.forEach(res.oapi, function (index, value) {
                if(index.tipo == 1){
                    $scope.filtros.push({id: index.id, nombre: index.nombre, valor: index.valor, orden: in        


Zachary Elias February 2016

According to the angular-chosen docs:

Note: don't try to use ngModel with ngRepeat. It won't work. Use ngOptions. It's better that way.

This implies that using ng-repeat for your select tag is likely to cause unexpected behavior -- for example, across different browsers.

Try getting rid of your option tag and just use ng-options:

   <select ng-model="addCapas" 
           ng-options="filtro for filtro in filtros"
           multiple class="control-group html-multi-chosen-select" 
           multiple="multiple" chosen style="width: 100%;"                      

FYI: your link to the server site won't work on StackOverflow. You can only connect directly to an IP address if you're on the same area network as the computer trying to connect.

Post Status

Asked in February 2016
Viewed 2,079 times
Voted 9
Answered 1 times


Leave an answer

Quote of the day: live life