Enable/disable button if value is different than select by default

[reyn...@gmail.com]

I need to toggle a button state between enabled/disabled if I change the default value of a select element. Take this HTML as example:

    <select
        ng-change="statusBtn(btnUpdFee, updFee)"
        ng-options="wt.id as wt.name for wt in wtax"
        ng-model="updFee"
        class="ng-pristine ng-valid"
    >
        <option value="0" selected="selected">cm-534be5d66aea3</option>
        <option value="1" selected="selected">cm-534be5d681a02</option>
        <option value="2">cm-534be5d68316e</option>
    </select>

    <button disabled="" ng-click="showCommentModal('updateFee')" class="btn btn-success" id="btnUpdFee"><i class="icon-ok"></i></button>

And this is the code I wrote but it's not working:

    $scope.statusBtn = function(btnId, curValue) {
        if (curValue != $scope.updFee) {
            $("#" + btnId).removeAttr("disabled");
        } else {
            $("#" + btnId).attr("disabled");
        }
    }

This approach doesn't work

I made some changes and now code look like this:

    <button class="btn btn-success" ng-click="showCommentModal('updateFee')" ng-disabled="!btnStatus"><i class="icon-ok"></i></button>

    $scope.$watch("updFee", function(newValue, oldValue) {
        if (newValue === oldValue) {
            $scope.btnStatus = false;
        } else {
            $scope.btnStatus = true;
        }

        console.log($scope.btnStatus, newValue, oldValue);
    });

And this is the output:

    First Page Load (no changes): false undefined undefined
    First Page Load (no changes): true 2 undefined
    Changing SELECT: true 1 2
    Changing SELECT again: true 3 1

But still not working, what I'm doing wrong?

[Gordon Bockus]

If you are using bootstrap I've found that I need to have ng-disabled="!btnStatus" and ng-class="{'disabled'=!btnStatus}" to have the button function as expected. 

[Luke Kende]

A plunker would help illuminate the issue.  It looks like you are trying to mix jQuery with angular which is not a good idea inside the controller.  Also, the way you think has to change with angular since it's a declarative language.

Here's a plunk I wrote to demo an approach: http://plnkr.co/edit/1xfYEnJSOSOCovJTlAVQ?p=preview

Tips:

- personally I use bootstrap and do not have to provide a class of disabled

- don't try to pass in a value on your ng-change function since when it fires the ng-model variable will already be updated to the selected value

- don't use a $watch on ng-model since ng-change can fire only when it's needed ($watch is not optimal and will fire on initial load which is why you see the undefined, undefined)

- there's a "dot rule" about ng-model such that it should always affect an object reference... meaning ng-model="something.yourvariable" and never just ng-model="yourvariable"

- you can't specify two default options with ng-options, don't try to set selected="selected" your self.

- keep it simple, then build up to complexity as you understand the basic concepts