ng-model doesn't work when within angular bootstrap ui

Question

ng-model doesn't work like this : plunker link

I tried to alert ng-model="selectedFriend" and expect a pop-up of friend's name, but something is wrong when it's used within tab's content of angular bootstrap ui.

        <select ng-model="friendsModel" ng-options="friend.name for friend in myFriends.friends.data">
    <option value="">Select friend</option>
    </select>

I suspect it was $scope issue because it work fine here plunker link

pkozlowski.opensource · Accepted Answer · 2014-05-06 12:35:50Z

2

Tabs are creating a new scope and thus you need to add a "famous dot" in your ng-model expression. Those scope-related issues are quite often and you can observe them even with built-in directives like ngInclude.

Finally, here is a working plunk: http://plnkr.co/edit/PPGA8SBwHeEQNAQCZT3K?p=preview

answered May 6, 2014 at 12:35

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

4 Comments

user3522457 Over a year ago

very confusing, any other method?

user3522457 Over a year ago

especially this line $scope.friends = { model: undefined };

pkozlowski.opensource Over a year ago

@user3522457 have a look at this comprehensive article to understand why this is needed and what are the alternatives: github.com/angular/angular.js/wiki/Understanding-Scopes

user3522457 Over a year ago

so tab became the parent's scope of selectedfriend since i placed them within tab?

Shivaraj · Accepted Answer · 2014-05-06 12:41:31Z

0

You can even pass friendsModel as a parameter to selectFriend() method

<button ng-click="selectFriend(friendsModel)">select</button>

and in JS

$scope.selectFriend = function(friendsModel){
    console.log(friendsModel);
  };

answered May 6, 2014 at 12:41

Shivaraj

6133 silver badges10 bronze badges

2 Comments

user3522457 Over a year ago

so I still declare ng-model="selectFriend"?

Shivaraj Over a year ago

Yes. You have to still declare.

Collectives™ on Stack Overflow

ng-model doesn't work when within angular bootstrap ui

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related