title: How to Show and Hide Element With Checkbox Status in Angularjs
body: <p>Can you please let me know how I can show and Hide an element in angular? in following example I want to initially hide the <code>#item-details</code> and show it if check box checked or Hide if un-check</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
  &lt;body&gt;
  &lt;div class="container" ng-controller="checkController"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-2"&gt;&lt;input type="checkbox" name="item" value="new" /&gt;Add New Item &lt;br /&gt;&lt;/div&gt;
  
  &lt;div class="col-md-6" id="item-details" ng-show=""&gt;
  &lt;div class="btn-group" role="group" aria-label="..."&gt;
         &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt;
         &lt;button type="button" class="btn btn-default"&gt;Middle&lt;/button&gt;
         &lt;button type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"&gt;/script&gt;
  &lt;script&gt;
     var app = angular.module('app', [])
     .controller('checkController', function() { });
      this.
  });
  
  &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>