Button not disabling

Question

I'm trying to disable a button based on a condition but I am facing issue while binding data or the new value assigned is not reflecting

<md-dialog aria-label="Image Preview">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <span flex></span>'

            <md-button ng-click="back()" style="right:1239px";>Previous</md-button>
            <md-button ng-click="next()" ng-disabled={{disableButton}}>Next
        </md-button>
            <md-button class="md-icon-button" ng-click="cancel()">
                <md-icon md-font-library="material-icons" aria-label="Close dialog" class="icon-static">close</md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <md-dialog-content>
        <img ng-src="{{imageSrc}}" alt="{{title}}" class="demo-image">
            <div>
                <h2>Comments</h2>
            </md-dialog-content>
        </div>
    </md-dialog>

JS Code

var index = attrs.indexNumber;
var disableButton = false;
if(index == -1){
disableButton = true;
}

The problem here is the value disableButton set to true is not reflecting back to html.

Can someone help me where I am wrong.

Answer 1

A local variable is not visible by the controller of the directive. In order to be able to access your variable from the HTML, you need to put it on the scope of the controller.

Instead of var disableButton = false if (index == -1){ disableButton = true; }

You have to assign the variable to the scope:

$scope.disableButton = false;
if (index == -1){
    $scope.disableButton = true;
}