Bind ng-model to button value

Issue

I am trying to bind the value of these two buttons–"Yes" and "No"– when clicked to formData using ng-model but having no luck. Is there a way to achieve this other than using ng-model?

<button class="" 
  ng-class="{'button--is-selected--turquoise': isSelected, 
             '' : isSelected===false}" 
  ng-click="isSelected = true" 
  ng-model="formData.yesPool">Yes
</button>

<button class="" 
  ng-class="{'button--is-selected--turquoise': 
  isSelected === false, 'notSelected' : isSelected }" 
  ng-click="isSelected = false" 
  ng-model="formData.noPool"">No
</button>

Here's my controller:

angular
  .module('testApp')
  .controller('formController', ['$scope', '$http', function($scope, $http) {
    $scope.formData = {};
    $scope.processForm = function(){
    };
  }]);

Solution

ng-model only works on elements that accept user input, button is not included. If you want to set a value when the button is clicked you can just put it on ng-click:

<button class="" 
  ng-class="{'button--is-selected--turquoise': isSelected, 
             '' : isSelected===false}" 
  ng-click="isSelected = true; formData.yesPool = true">Yes
</button>

<button class="" 
  ng-class="{'button--is-selected--turquoise': 
  isSelected === false, 'notSelected' : isSelected }" 
  ng-click="isSelected = false; formData.noPool = true">No
</button>

OR put those in a function instead

// HTML
<button class="" 
  ng-class="{'button--is-selected--turquoise': isSelected, 
             '' : isSelected===false}" 
  ng-click="yesButtonIsClicked()">Yes
</button>

<button class="" 
  ng-class="{'button--is-selected--turquoise': 
  isSelected === false, 'notSelected' : isSelected }" 
  ng-click="noButtonIsClicked()">No
</button>

// JS
$scope.noButtonIsClicked()
{
  $scope.isSelected = false;
  $scope.formData.noPool = true;
};

$scope.yesButtonIsClicked()
{
  $scope.isSelected = true;
  $scope.formData.yesPool = true;
}

hope that helps

Answered By - masterpreenz