How to hide and show a div, based on model condition in angularjs? -

i want hide/show div based on checkbox. seems pretty simple. store value of checkbox in model , use in div ng-show. doing wrong?

<div ng-app='visibleapp'>     <div ng-controller='mycontroller'>          <input type="checkbox" name="hidebasicinfo" ng-model="hidebasicinfo">hide basic information section          <div ng-show="{{!hidebasicinfo}}">              <label for="firstname">first name:</label>              <input type="text" name="firstname" ng-model="firstname"/></br>               <label for="middlename">middle name:</label>              <input type="text" name="middlename" ng-model="middlename"/></br>              <label for="lastname">last name:</label>              <input type="text" name="lastname" ng-model="lastname"/>          </div>          <hr/>          <div>              <h4>debug information</h4>              hidebasicinfo: {{hidebasicinfo}}<br/>              !hidebasicinfo: {{!hidebasicinfo}}          </div>      </div> </div> 

js file:

var visibleapp = angular.module('visibleapp',[]);  visibleapp.controller('mycontroller', function($scope){      $scope.data = "my data";      $scope.hidebasicinfo = false;  }); 

thank you.

see fiddle

almost there...

 <div ng-hide="hidebasicinfo">     ...  </div> 

no template braces ( {{}} ) needed.