Angular js : Open div on clicking panel and close itself
<p>I Have a row ,  panel and a div which is closed on load.</p>

<p>when I click on panel then the div should get appear and  row as well as panel should get disappear and when i click on <strong>X</strong> then panel and row should get appear.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;

&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;

&lt;div class="row"&gt;
  &lt;div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 margin_text"&gt;
    &lt;div class=" font-thin pull-left margin_top_4 padding_left_20"&gt;
      &lt;span class="font_size_17 "&gt;Discussion Forum&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;div class="panel panel-default"&gt;
  &lt;div class="panel-header" ng-click="open_div=true"&gt;Click me&lt;/div&gt;
&lt;/div&gt;


&lt;div ng-show="open_div"&gt;
  Div Opened &lt;span&gt;X&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>when I click on <strong>Click me</strong> then div should open and discussion forum row and panel should get disappear. and when I click on <strong>X</strong> then that div should get closed and panel and row should appear.</p>