Como acessar a opção selecionada a partir do controlador no botão clique em angularjs?

Question

Eu tenho uma escolha de campo com um ng-model atributo em uma guia na interface do usuário de bootstrap tabset.Há também um botão na guia.No clique do botão que eu gostaria de obter o valor selecionado no modelo.Eu tentei usar

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

e, em seguida, o controlador

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

Mas que não parecem conter o valor.Eu tentei olhar para o $scope variável e parece conter o selectedOption dentro de algo chamado $$childTail

Existe alguma outra forma de acessar o selectedOption valor ou devo mudar a estrutura do meu ponto de vista?

Eu tenho um Plunker aqui o que eu estou tentando fazer.

Answer 1

Tanto Mateus Berg e Bumblebee Man respostas deve funcionar, mas eles não explicam o que está acontecendo.

Ok, basicamente, ele vai para baixo, como este:

O tabset directiva que você está usando não transclusion assim, o selectedOption é, na verdade, no interior de escopo(tabset do escopo), e não em seu TabsDemoCtrl a lidar. Esta resposta explica que a transclusão faz, e como você pode acessar um transcluída modelo.

Transclusão torna superficial cópias de seus modelos, por isso mesmo, se você init opção selecionada como $scope.selectedOption = "5"; em seu TabsDemoCtrl, a sua escolha irá mostrar-5, conforme selecionado no início, mas as alterações não serão refletidas para o seu TabsDemoCtrl do controlador de escopo porque no tabset da criança âmbito 5 é apenas copiado, e o que está sendo atualizada é no tabset escopo não é o seu escopo.

Você também pode usar um objeto para a sua escolha do modelo.Desde a inclusão cria uma cópia superficial, objetos/matrizes/funções são copiados de referência e variáveis são copiados por valor.É por isso também que você pode acessar a sua TabsDemoCtrl botão de clique do interior de escopo.

atualizado plnkr com outra solução alternativa(a versão de objeto) :

criado um objeto no seu controlador,

$scope.selection = {};

e utilizado no modelo como esse,

ng-model="selection.option"

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

Answer 2

Angular guia interface do usuário/tabset directiva criar novos escopos, por isso, para acessar o principal escopo (o Que você está tentando fazer) apenas anexar pai $

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

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

Answer 3

Editar:Desculpas, eu li errado a pergunta, você não pode fazer este?

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

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