javascriptangularjsjquery-chosenangular-chosen

Problems with ng-model while using Angular Chosen


I have a table that contains a list of users in which the last column of every row contains a button. When the button is clicked a popup form appears. In the popup, I use a multiple select with the help of Angular Chosen. Each user has a list of 'interests' and I would like to display them in the multiple select. The problem is that even after fetching all the necessary data, the ng-model appears to be empty.

This is the multiple select.

<select id="multipleSelect"
                    data-placeholder="Select interests..."
                    chosen
                    multiple
                    ng-model="$ctrl.activeInterests" ng-options="interest for interest in $ctrl.interests"
                    style="width:370px; height:100px;">
                    <option value=""></option>
</select>

Here is my component. This function is triggered when the button is clicked.

this.editButtonClicked = function(tableRowUser) {
                $scope.firstName = tableRowUser.firstName;
                $scope.lastName = tableRowUser.lastName;
                $scope.email = tableRowUser.email;
                $scope.role = tableRowUser.role;
                $scope.tag = tableRowUser.tag;
                $scope.username = tableRowUser.username;

                // Fetch the active interests
                fetchInterests($scope.tag);
                // Fetch the available interests the user can choose
                fetchAllAvailableInterests();
                // After this, make the Edit Form/Popup visible
                togglePopupClass();
            }

function fetchInterests(newInterests) {
                self.activeInterests = [];
                var interests = newInterests.split('|');

                console.log("New interests");
                console.log(newInterests);

                for (i = 0; i < interests.length; i++) {
                    // Trim the excess whitespace.
                    interests[i] = interests[i].replace(/^\s*/, "").replace(/\s*$/, "");

                    self.activeInterests.push(interests[i]);
                }

            }

After calling fetchInterests, 'activeInterests' contains what I would like the ng-model to display, but the view remains empty.

Any help would be highly appreciated.


Solution

  • Found out the solution. What you would like to display in the ng-model should always be in the ng-options as well.