title: AngularJS ng-show directive showing elements before hiding elements
body: <p>So I'm trying to create a slide effect for some bootstrap badges I am using to display some hierarchical data relationships using AngularJS.</p>
  
  <p>I have a slider-effect for showing new sub-categories, and hiding sub-categories that are already open. Now this is all working well, except it seems to do the "showing slide" first, and then the "hiding slide" second, which is the opposite of what you would like.</p>
  
  <p>ie. When you hit a badge for a different category, it should first slide closed the already showing other sub-categories, and then open the new sub-categories to be shown.</p>
  
  <p>The html looks like this:</p>
  
  <pre><code>&lt;div ng-controller="MainController"&gt;
    &lt;ul ng-repeat="category in categories"&gt;
      &lt;li ng-if="category.category_type=='parent'" ng-show="category.category_show"&gt;
        &lt;span class="badge badge-p" ng-click="updateResults(category)"&gt;{{category.category_name}}&lt;/span&gt;
      &lt;/li&gt;
      &lt;li ng-if="category.category_type == 'child'" ng-show="category.category_show" class="badge-slider"&gt;
        &lt;span class="badge badge-c"&gt;{{category.category_name}}&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The relevant CSS looks like this:</p>
  
  <pre><code>.badge-slider {
      max-height: 100px;
      -webkit-transition: max-height linear 0.2s;
      -moz-transition: max-height linear 0.2s;
      -o-transition: max-height linear 0.2s;
      transition: max-height linear 0.2s;
      overflow:hidden;
  }
  
  .badge-slider.ng-hide {
      max-height: 0px;
  }
  </code></pre>
  
  <p>I have mocked up a simplified plnkr example to demonstrate what is happening here: <a href="http://plnkr.co/edit/S255yk0N2wAXrfq7Mqd6" rel="nofollow">http://plnkr.co/edit/S255yk0N2wAXrfq7Mqd6</a></p>
  
  <p><strong>EDIT 1:</strong> Thanks to the help of sbedulin I was able to get this working beautifully. I've also updated the code so that the subcategories dynamically indent based on how far down the tree they are. You can find my newly mocked up version here: <a href="http://plnkr.co/edit/5I1pU0TZo6AjHJTbBuG9" rel="nofollow">http://plnkr.co/edit/5I1pU0TZo6AjHJTbBuG9</a></p>