angularjs show doesn't work

Question

I have html button

<button id="postChanges" ng-show="changes.available" data-ng-click="postChanges()">Save</button>

and controller for this view

myApp.controller('myController', ['$scope', function ($scope) {

    var changes = {
        available : false
    }

    $scope.postChanges = function () {
        console.log('changes before: ' + changes.available);
        if (changes.available) {
            changes.available = false;
        }
        else {
            changes.available = true;
        }
        console.log('changes after: ' + changes.available);
}
}]);

I want to make button visible if changes.available are true and hide it when it is false but it doesn't work. I also tried with just boolean value changes = true / changes = false, data-ng-show instead of ng-show '!' before value (ng-show="!changes.available" or ng-show="!changes") but none of this solutions worked. I'm logging changes value in console and it seems it is ok so I suppose it is a problem with button attribute but I have no clue why :(

Answer 1

Changes.available needs to be on $scope ...

var changes = {
    available : false
};

... to ...

$scope.changes = {
    available : false
};

This should do it. The ng-show on the button needs to be able to see the variable.

Answer 2

should be

$scope.changes =  {
    available : false
}

Otherwise it is not visible for the ng-show directive to use.