$digest already in progress ... Maybe a bug?

[mdmoura]

Hello,

I have the following HTML:

<select data-ng-model="model.message.property" name="property" data-selectize data-config="model.properties" data-options="model.properties.options"></select>

And on my controller I have the following:

$scope.model = {
  message: {
    property: ''
  },
  properties: {
    maxItems: 1,
    options: ['Villa', 'Appartment', 'Comercial', 'Land'],      
    persist: false
  }
}

Everything seems to work fine ...

However, when I select an option I get the following error:
Error: [$rootScope:inprog] $digest already in progress

Does anyone has any idea what might be wrong?

Thank You,
Miguel

[PhiLhoSoft]

Wild guess: put your options out of the properties, as Selectize tries to interpret them, and they are not an array of objects (with text and value fields).

[mdmoura]

@PhiLhoSoft:
I tried that and didn't solve it ... I got the same error.

[PhiLhoSoft]

I suggest to make a fiddle (jsFiddle / Plunker / whatever your choice) reproducing your problem (you can get inspiration from the fiddle linked from the main page). Thus it would be easier to help.

[mdmoura]

Sorry for the delay. I was able to reproduce this problem:
http://plnkr.co/edit/Ul6x6F?p=preview

If you select an item you will see the error I mentioned on the console.

Any idea why?

[PhiLhoSoft]

I think that's because you used the selectize directive as an attribute instead of using it as a tag...
Looks like it is untested, or at perhaps there is a regression, from the library or from angular...

Simple workaround: use <selectize data-ng-model="model.message.property" name="property" data-config="model.properties" data-options="model.options"/> instead. Not exactly the same thing, but globally it works.

[mdmoura]

I am using as an attribute since I need the HTML to validated by W3C.
I wonder if this is something that is fixable or not ...

[PhiLhoSoft]

It looks like AngularJS sees the select element and applies the selectDirective to it, conflicting with the angular-selectize directive.

There is a workaround: Selectize can be used on an <input type="text"> element, or even on a simple div: <div data-ng-model="model.message.property" name="property" data-selectize data-config="model.properties" data-options="model.properties.options"></div> works.

[jbubsk]

@PhiLhoSoft , thanks! That workaround works perfectly!