Enable radio button on specific input

Question

I have a form with some input fields and radio buttons. On a specific input I want to enable the radio buttons. This is the html file:

<div ng-controller="participantCtrl">
   {{specialEnabled}}
   <form>
      <input type="text" class="form-control" placeholder="Name" ng-model="participant.name" ng-model-options="{ getterSetter: true }">
      <div id="choice">
        <input type="radio" ng-disabled="{{specialEnabled}}" name="specialchoice" value="Value1"> Value1
        <input type="radio" ng-disabled="{{specialEnabled}}" name="specialchoice" value="Value2"> Value2
      </div>
    <input type="submit" value="submit"></input>
  </form>
</div>

And here is the controller:

SomeControllers.controller('participantCtrl', ['$scope', function($scope) {
  $scope.specialEnabled = "true";
  var _name = '';

  $scope.participant = {
    name: function(newName) {
      if (angular.isDefined(newName)) {
        _name = newName;
        if  (_name == "Foo"){
          $scope.specialEnabled = "false";

        }
      }
    return _name;
   }
 };
}]);

What I do is check the name if it's Foo and then change the disabled to false. Which happens. I am printing specialEnabled on top of the form and it changes from true to false as soon as the name matches but it doesn't enable the radio buttons. What am I doing wrong?

Answer 1

ng-disabled

is an angularjs-directive, you don't need to add the brackets. just use that

ng-disabled="specialEnabled"

Answer 2

ng-disabled uses two-way binding.

specialEnabled to be boolean true/false

ng-model-options are introduced in angular version 1.3.

We don't need the interpolation for ng-disabled

<input type="radio" ng-disabled="specialEnabled" name="specialchoice" value="Value1">

Plnkr: http://plnkr.co/edit/YAnTypvRjfJIL7Z4pC4s?p=preview