Angular Change dynamically div's visibility with ng-model

Question

I'm trying to change dynamically the visibility of the div with

ng-show="models.show"

the following code, was my first thoughts:

but it's not working.

html

   <div ng-init="models.show=false" ng-show="models.show"> 
        Show!
   </div>
   <button ng-click="hideshow()">Click </button>

javascript/angular

$scope.hideshow= function(){
        $scope.models.show = ($scope.model.show)?false:true;
};

Answer 1

Try like this

<div ng-show="show"> 
        Show!
</div>
<button ng-click="hideshow()">Click </button>

JS

$scope.show=true;
$scope.hideshow= function(){
    $scope.show=!$scope.show
};

Answer 2

You can simply do something like this:

<div ng-init="show=false">
    <div ng-show="show"> 
            Show!
    </div>
    <button ng-click="!show">Click</button>
</div>

No Need of going back to the controller in this case.