how to declare ng-show and ng-hide in one div
<p>In my project I had a requirement to use both <code>ng-show</code> and <code>ng-hide</code> in one <code>div</code>.
I felt that's a bad practice. </p>

<p><strong>html code:</strong></p>

<pre><code>&lt;div ng-hide="itemDIv2" ng-show="itemDIv2"&gt; 
   &lt;input type="text" placeholder="Item Name" ng-model="itemname"&gt; 
   &lt;div&gt; 
       &lt;input type="submit" class="btn" value="Save" ng-click="subcatiems()&gt;
   &lt;/div&gt;
&lt;/div&gt; 
</code></pre>

<p><strong>another div:</strong></p>

<pre><code>&lt;div&gt;&lt;button  class='btn' ng-click="catitems2()"&gt;Add items to Category&lt;/button&gt;&lt;/div&gt;
</code></pre>

<p><strong>controller:</strong></p>

<pre><code>$scope.catitems2 = function(){
     return $scope.itemDIv2 = true; 
}
</code></pre>

<p>how to take a condition that initially it is on hide and when the button is clicked i want to make <code>ng-show="itemDIv2"</code> to <code>true</code> so that I can show the <code>div</code> one more tome.</p>