array not binding to select using AngularJs

Question

i am populating a collection called CommandGroup like this

        function getCommandGroups() {
        $scope.commandGroups = commandGroupResource.query();

        return $scope.commandGroups.$promise.then(function (response) {

            $scope.commandGroups = response;

        });

    }

my html looks like this.

                        <select ng-model="vm.Job.CommandGroup" name="ddlCommandGroup" bootstrap-dropdown>
                        <option value="">Select Something</option>
                        <option ng-repeat="cmdGroup in commandGroups" value="{{cmdGroup.Id}}">{{cmdGroup.Name}}</option>
                    </select>

for some reason drop down remains empty. The function getCommandGroups() calls back end and populates commandGroups with array of objects each of which has Id and Name.

Please help.

UPDATE

i figured out something is wrong with the directive bootstrap-dropdown which is required as it is Bootstrap-select

angular
.module('app').directive('bootstrapDropdown', ['$timeout',
    function ($timeout) {
        return {
            restrict: 'A',
            require: '?ngModel',
            link: function (scope, element, attrs, ngModel) {                  
                $timeout(function () {
                    element.selectpicker();
                });
            }
        };
    }
]);

could you try to place {{commandGroups}} seems like you are facing scope related issue..you placed this div inside ng-if or ng-repeat — Pankaj Parkar
– Pankaj Parkar, Commented Aug 21, 2015 at 19:35
It's not clear to me, why (and what) you return from getCommandGroups() - only the first line is needed. you may delete the entire return statement. — marapet
– marapet, Commented Aug 21, 2015 at 19:35

igorshmigor · Accepted Answer · 2015-08-24 05:33:19Z

2

I believe the problem is that the third-party JavaScript (bootstrap-select) doesn't get informed about the change. You probably have to call selectpicker('refresh') on the element after assigning the response to commandGroups.

Update: It's also required to use $scope.$apply() before calling selectpicker('refresh'):

function getCommandGroups() {
    $scope.commandGroups = commandGroupResource.query();

    return $scope.commandGroups.$promise.then(function (response) {
        $scope.commandGroups = response;
        $scope.$apply();
        $('.mySelect').selectpicker('refresh'); 
    });
}

See comment below for a fork of Taylor Buchanan's Plunk to see this in action.

Update 2: Use timeout instead to prevent a "digest already in progress" error:

function getCommandGroups() {
   $scope.commandGroups = commandGroupResource.query();

   return $scope.commandGroups.$promise.then(function (response) {
        $scope.commandGroups = response;
        $timeout(
           function(){
               $('.mySelect').selectpicker('refresh'); 
           }
        );
   });
}

edited Aug 24, 2015 at 5:33

answered Aug 21, 2015 at 21:53

igorshmigor

8125 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Raas Masood Over a year ago

i added class="mySelect" in html and $scope.commandGroups = response; $('.mySelect').selectpicker('refresh'); still no luck.

igorshmigor Over a year ago

What happens if you comment out the line element.selectpicker in the bootstrapDropdown directive, just for troubleshooting? You should see the regular select-box, does that one get updated after you assigned the new value to commandGroups? If not, does it help adding a $scope.$apply() after that?

igorshmigor Over a year ago

I've just played with Taylor Buchanan's Plunk and forked it to include the bootstrap-JavaScripts and CSS: plnkr.co/edit/MFhElUgAnCNY9XY0SdRV?p=preview Adding $scope.$apply() before updating the bootstrap-dropdown using selectpicker('refresh') works in this Plunk. I think this might have been the issue.

Raas Masood Over a year ago

whats in the plunkr i followed it it works, means idea of apply before selectpicker works but i also get digest i progress error.

igorshmigor Over a year ago

I see. I guess it's a "digest already in progress" error? In that case, instead of using scope apply, use a timeout.

|

Taylor Buchanan · Accepted Answer · 2015-08-21 20:31:22Z

1

This plunk contains the exact code you have provided, with the exception of the bootstrap-dropdown directive and your actual web service. The code functions as expected. This indicates there is a problem elsewhere in code you did not provide.

Possible issues:

~~The bootstrap-dropdown directive is doing something funny.~~

a. UPDATE: The directive works "fine" in this plunk. Not sure what it's supposed to be doing, but it doesn't cause the behavior you describe.
You are missing an ng-controller in your markup.
Something else we can't see is clearing out $scope.commandGroups.

edited Aug 21, 2015 at 20:31

answered Aug 21, 2015 at 20:13

Taylor Buchanan

4,8472 gold badges30 silver badges42 bronze badges

1 Comment

Raas Masood Over a year ago

i have updated my question. something is wrong with the directive.

MichaelAttard · Accepted Answer · 2015-08-21 20:17:03Z

0

Reassigning $scope.commandGroups might be interfering with promise resolution/ scope digest cycle. Try changing the function to the following:

function getCommandGroups() {
    commandGroupResource.query().$promise.then(function (response) {
        $scope.commandGroups = response;
    });
}

answered Aug 21, 2015 at 20:17

MichaelAttard

2,2483 gold badges20 silver badges26 bronze badges

Collectives™ on Stack Overflow

array not binding to select using AngularJs

3 Answers 3

12 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related