Get selected value in angular js

Question

I am new to angular.I was making a simple demo for select in which I will add new select according to current value selected. I am usig dynamic value for options and for model as well. I am not able to get the selected value please help.

HTML code goes here:

<md-input-container ng-repeat="a in selects" class="md-block"  style="margin-top:20px;">
      <label>{{a.label}}</label>
      <md-select required  ng-model="a.model" ng-change="callme()" flex="40">
        <md-option ng-model="a.model" ng-repeat="optionValue in a.options" ng-value="optionValue.option">
            {{optionValue.option}}
        </md-option>
      </md-select>
      <div class="errors" ng-messages="petApp.favoriteColor.$error">
            <div ng-message="required"> You need to select a option</div>
      </div>
  </md-input-container>

JS code goes here

$scope.selects =  [{label:"Your Pet",model:"pet",options:[{option:"Cat"},{option:"Dog"},{option:"Guinea pig"}]}];

$scope.callme = function(){
  console.log($scope.pet);
  $scope.selects.push({label:"Your Pet",model:"pet",options:[{option:"Cat"},{option:"Dog"},{option:"Guinea pig"}]});
}

Here the model name is pet while I do $scope.pet it is giving undefined.

Answer 1

If you want to use $scope.pet as your model then you need to use it in the ng-model directive like this:

(ng-model is where the value of the selection gets assigned).

<md-input-container ng-repeat="a in selects" class="md-block"  style="margin-top:20px;">
      <label>{{a.label}}</label>
      <md-select required  ng-model="pet" ng-change="callme()" flex="40">
        <md-option ng-repeat="optionValue in a.options" ng-value="optionValue.option">
            {{optionValue.option}}
        </md-option>
      </md-select>
      <div class="errors" ng-messages="petApp.favoriteColor.$error">
            <div ng-message="required"> You need to select a option</div>
      </div>
  </md-input-container>

Also you should make sure your $scope.pet variable is declared prior to rendering the page. You may assign a value to $scope.pet to have your dropdown pre-populated... $scope.pet = "Cat";

your js code should look something like this:

$scope.pet = ""; // or you may assign pet a value if you like

$scope.selects =  [{label:"Your Pet",model:"pet",options:[{option:"Cat"},{option:"Dog"},{option:"Guinea pig"}]}];

$scope.callme = function(){
  console.log($scope.pet);
  $scope.selects.push({label:"Your Pet",model:"pet",options:[{option:"Cat"},{option:"Dog"},{option:"Guinea pig"}]});
}

The way you have this expressed now with a.model as your ng-model value, Angular assigns the value to the "model" property of the $scope.selects objects. If you inspect the $scope.selects (angular Batarang or similar chrome plugin.) array you will see in the model property of one of the objects you will have the correct value you selected, but you are just assigning it to the wrong place.

In the case that you would need multiple selects and models you would use your existing objects model property or something similar, a.model in your ng-model, and then in ng-change you will pass the "index" of "a" in selects.

<md-select required  ng-model="a.model" ng-change="callme($index)" flex="40">

so when your "callme" function gets called you would be able to see the value of the selection by doing the following.

$scope.callme = function(index){
  console.log($scope.selects[index].model);

}