CODEWITHSUNDEEP
javascriptjqueryangularjsjquery-chosen
Misha N.
Misha N.

Reputation: 3455

Angularjs with jquery.chosen - ngModel does not get updated

I'm using https://github.com/localytics/angular-chosen directive to create simple multiselect control.

This should be simple, but ngModel on select does not get updated.

Here is angular controller code:

var app = angular.module('Simple', ['localytics.directives'])

.controller('SimpleCtrl', function ($scope, $http) {

    $scope.states = ['one', 'two', 'three', 'four']

    $scope.state = ['one'];

});

Html:

<select multiple
     chosen
     ng-model="state"
     ng-options="s for s in states">
     <option value=""></option>
</select>

<p ng-repeat="s in state">{{s}}</p>

Everything works except 'state' does not get updated. I'm using angularjs 1.2.10. I would appreciate any suggestion. Thanks.

Here is jsfiddle with presenting same issue http://jsfiddle.net/mousenine/MQzXq/12/

Upvotes: 3

Views: 3170

Answers (1)

Misha N.
Misha N.

Reputation: 3455

The root of the problem was I included angular.js after jquery. It was like that in the jsfiddle as well.

Once reversed the order (first jquery, then angular) it started to work normally.

Here is where I found what was the catch https://github.com/angular/angular.js/wiki/Understanding-Directives#wiki-element--angularelement--jquery--

Upvotes: 8

Related Questions