How to access selected option from the controller on button click in angularjs?

Question

I have an select field with an ng-model attribute in a tab within ui-bootstrap's tabset. There is also a button on the tab. On click of the button I would like to get the selected value in the model. I tried using

<select ... ng-model="selectedOption"></select>
<button ng-click="buttonClick()">Click</button>

and then in the controller

$scope.buttonClick = function() {
  //try to access $scope.selectedOption
}

But that does not seem to contain the value. I tried looking into the $scope variable and it seems to contain the selectedOption inside something called $$childTail

Is there any other way to access the selectedOption value or should I change the structure of my view?

I have a Plunker here of what I'm trying to do.

score 4 · Accepted Answer · edited May 23 '17 at 11:43

Both Mathew Berg's and Bumblebee Man's answers should work but they do not explain what's happening.

Okay basically it goes down like this:

The tabset directive that you are using does transclusion so the selectedOption is actually in an inner scope(tabset's scope), not in your TabsDemoCtrl's cope. This answer explains what transclusion does, and how you can access an transcluded model.

Transclusion makes shallow copies of your models, so even if you init selected option like $scope.selectedOption = "5"; in your TabsDemoCtrl, your select will show 5 as selected at the begining but changes will not be reflected to your TabsDemoCtrl controller's scope because in the tabset's child scope 5 is just copied, and the one being updated is in the tabset's scope not your scope.

You can also use an object for your select's model. Since the transclusion creates a shallow copy, objects/arrays/functions are copied by reference and variables are copied by value. This is also why you can access your TabsDemoCtrl's button click from the inner scope.

updated plnkr with another alternative solution(the object version) :

created an object in your controller

$scope.selection = {};

and used in model like this

ng-model="selection.option"

http://plnkr.co/edit/5sI0arorV9dULzaDxRra?p=preview

That explains a lot. I looked at the resulting html and saw the `ng-transclude` directive on the ul created by tabset. Thank you — Deepak, Jun 02 '14 at 20:26

JMK · Answer 2 · 2014-06-02T19:40:08.247

2

Edit: Apologies, I misread the question, can't you just do this?

<select ... ng-model="selectedOption"></select>
<button ng-click="buttonClick(selectedOption)">Click</button>

$scope.buttonClick = function(selectedOption) {
  selectedOption.whatever...
}

edited Jun 02 '14 at 19:40

answered Jun 02 '14 at 19:27

JMK

27,273
52
163
280

This is totally not the question is asking. – Quad Jun 02 '14 at 19:31
@quad Apologies, totally misread the question and have updated my answer – JMK Jun 02 '14 at 19:36

score 2 · Answer 3 · answered Jun 02 '14 at 19:38

Angular ui tab/tabset directive create new scopes, so in order to access the parent scope (What you're trying to do) just attach $parent

<select name="selectedCampaign" ng-model="$parent.selectedOption" ng-options="option for option in options"></select>

Updated plunkr: http://plnkr.co/edit/BgMMn4tJRWm72ZXeQG3N

How to access selected option from the controller on button click in angularjs?

3 Answers3