Angularjs toggle div visibility

Question

I am trying to toggle a div text on click of a button. I tried taking a scope variable and toggeling classname based on the variable. Where am I making the mistake here

<button ng-click="toggle()">test</button>
<div ng-class="{{state}}">
  hello test
</div>

function ctrl($scope) {
  $scope.state = vis;
  $scope.toggle = function() {
    state = !state;
  };
}

.vis {
  display: none;
}

Answer 1

You can simplify this a lot like so

<button ng-click="showDiv = !showDiv">test </button>
<div ng-show="showDiv" >
    hello test
</div>

Fiddle example

Unless you need the specific ng-class to toggle in which case you can do something like

<button ng-click="showDiv = !showDiv">test </button>
<div ng-class="{'vis' : showDiv }" >
    hello test
</div>

Fiddle example

(just make sure you're using a newer version of angular for this)