javascriptangularjslocalyticsangular-chosen

Angular Chosen Localytics - ng model not working properly

I have a trouble with angular-chosen select, it's not updating ng-model, when selected option changes.

angular-chosen plugin: https://github.com/leocaseiro/angular-chosen

Link to plunker to reproduce this issue: http://embed.plnkr.co/LqlLP3DnHj0hvDdyVqeU/

Solution

  • You have two issues:

    1) In the official doc they say:

    Also important: if your ngModel is null or undefined, you must manually include an empty option inside your select, otherwise you'll encounter strange off-by-one errors

    So inside your controller init the variable:

    app.controller('MainCtrl', function($scope) {
  $scope.selectedAgency = '';
  $scope.values = [{id: 1,name: 'first'}, {id: 2,name: 'second'}];
});

    2) You have an issue with the order you included your dependencies in the index.html. Change the order in this way: 

    <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link href="style.css" rel="stylesheet" />
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-semver="1.4.0-rc.2" src="https://code.angularjs.org/1.4.0-rc.2/angular.js" data-require="angular.js@1.4.x"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chosen-localytics/1.7.0/angular-chosen.min.js"></script>
    <script src="chosen.jquery.js"></script>
    <script src="angular-chosen.min.js"></script>
    <script src="app.js"></script>

  </head>

    After these changes your sample works like charm

    I hope it helps