angularjsui-select2

Select2 not working in angular


I am using this library: https://github.com/angular-ui/ui-select I can see the demo working properly, but when I try an adapt it for my own purposes it doesn't work. The actual control itself seems okay, but the ng-model I specify doesn't update.

Here is a plunkr which shows what I mean: http://plnkr.co/edit/xEtoR49Du9CdrNNoDWAa?p=preview

If you remove 6M (for example), the array selectedServices shown below it does not update.

<ui-select multiple ng-model="selectedServices">
    <ui-select-match placeholder="Services...">{{ $item }}</ui-select-match>
    <ui-select-choices repeat="service in services | filter: $select.search">
        {{ service }}
    </ui-select-choices>
</ui-select>
{{ selectedServices }}

And:

app.controller('DemoCtrl', function($scope, $http, $timeout) {
    $scope.selectedServices = ['1M', '6M', '12M'];
    $scope.services = ['1M', '6M', '12M'];
});

Solution

  • here is the plunker which works with same example: http://plnkr.co/edit/3Rz09QUWOZFloLW0KfXF?p=preview

    In ui-select for ng-model you need to create empty object and you need to assign values to it.

     $scope.selectedServices = {};
     $scope.selectedServices.values = ['1M', '6M', '12M'];