¿Cómo acceder a la opción seleccionada desde el controlador al hacer clic en el botón en angularjs?

Question

Tengo un campo de selección con un ng-model atributo en una pestaña dentro del conjunto de pestañas de ui-bootstrap.También hay un botón en la pestaña.Al hacer clic en el botón, me gustaría obtener el valor seleccionado en el modelo.Intenté usar

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

y luego en el controlador

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

Pero eso no parece contener el valor.Intenté mirar en el $scope variable y parece contener la selectedOption dentro de algo llamado $$childTail

¿Hay alguna otra forma de acceder al valor de la opción seleccionada o debería cambiar la estructura de mi vista?

tengo un Plunker aquí de lo que estoy tratando de hacer.

Answer 1

Tanto las respuestas de Mathew Berg como las de Bumblebee Man deberían funcionar, pero no explican lo que está sucediendo.

Bien, básicamente se reduce así:

La directiva tabset que estás usando no transclusion por lo que la opción seleccionada está en realidad en un alcance interno (alcance del conjunto de pestañas), no en el frente de TabsDemoCtrl. esta respuesta explica qué hace la transclusión y cómo se puede acceder a un modelo transcluido.

Transclusion hace copias superficiales de sus modelos, por lo que incluso si inicia la opción seleccionada como $scope.selectedOption = "5"; en su TabsDemoCtrl, su selección mostrará 5 como se seleccionó al principio, pero los cambios no se reflejarán en el alcance de su controlador TabsDemoCtrl porque en el alcance secundario del conjunto de pestañas, 5 simplemente se copia y el que se actualiza está en el alcance del conjunto de pestañas, no en su alcance.

También puedes usar un objeto para el modelo de tu selección.Dado que la transclusión crea una copia superficial, los objetos/matrices/funciones se copian por referencia y las variables se copian por valor.Esta es también la razón por la que puede acceder al clic del botón TabsDemoCtrl desde el alcance interno.

plnkr actualizado con otra solución alternativa (la versión del objeto):

creó un objeto en su controlador

$scope.selection = {};

y usado en modelo como este

ng-model="selection.option"

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

Answer 2

La directiva angular ui tab/tabset crea nuevos ámbitos, por lo que para acceder al ámbito principal (lo que estás intentando hacer) simplemente adjunta $parent

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

Plunkr actualizado: http://plnkr.co/edit/BgMMn4tJRWm72ZXeQG3N

Answer 3

Editar:Disculpas, leí mal la pregunta, ¿no puedes simplemente hacer este?

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

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