angularjs ng-disabled doesn't add disabled to button

Question

I have an input button that I want to set to disabled if a user selects a certain value from a select box:

Select menu:

<select id="jobstatus" name="jobstatus"  ng-model="associate.JobStatus" class="form-control">
        <option value="0">Current</option>
        <option value="1">Former</option>
        <option value="2">Never worked there</option>
</select>

Input Button:

    <input type="submit" class="btn btn-info pull-right 
btn-lg btn-block" ng-disabled="{{associate.JobStatus === '2'}}" />

Now when I am viewing the source, when I do select option 2, the input button element changes from value ng-disabled="false" to ng-disabled="true" but the disabled attribute is not applied to the button.

What am I doing wrong here?

Answer 1

Use this

<input type="submit" class="btn btn-info pull-right btn-lg btn-block" ng-disabled="associate.JobStatus == 2" />

Answer 2

Angular Doc ngDisabled

Curly braces means the notation {{ }} to bind expressions to elements is built-in Angular markup.

Use:

<input type="submit" ng-disabled="associate.JobStatus == 2" />

Instead of:

<input type="submit" ng-disabled="{{associate.JobStatus == 2}}" />

same as for ng-show / ng-hide / ng-if, you can use the model expression itself instead of {{}}

For Example:-

Use:

<div ng-show="someObject.showProperty">

Instead of:

<div ng-show="{{someObject.showProperty}}">