AngularJS ng-disabled directive with expression is not working

Question

User Story: When a new user clicks the New User checkbox and accepts the TermsAndConditions radio button, the Register button should be enabled.

My code in angularJS

Answer 1

The ng-disabled expression is evaluated in the present scope. Hence, you should only need the following without any extra interpolation with {{..}}:

    <input type="submit" 
           value="Register" 
           ng-show="isNewUser" 
           ng-disabled="!hasAcceptedTnC(tnc)">

Note that I added a ! since you probably want the button disabled if the user has not accepted the TnC.

Working demo: http://plnkr.co/edit/95UiO4Rd2IMh8T1KjSQK?p=preview

---

A comment was posted below asking how to reason about when to use {{...}} and when to use bare expression with a given ng-* directive. Unfortunately, there is no syntactical clue hidden in the directives which can reveal that information. Looking at the documentation will turn out to be fastest way to find out this information.

Answer 2

I tried taking help from the above solution but it didn't work. So I found another solution. By adding the following code in the CSS for that element, solves my problem pointer-events: none;

So in general :-

 element[disabled]{
  pointer-events: none;
 }

Answer 3

if ($scope.Data.length > 0)
  $scope.isNewUser = true;
else $scope.isNewUser = false;

<md-button class="md-raised md-primary" 
            ng-click="Search()" 
            ng-disabled="!isNewUser" 
            aria-label="pause">Assign </md-button>