title: how to declare ng-show and ng-hide in one div
body: <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>