title: Ionic: ng-show and page transition
body: <p>I'm developing a mobile app with Ionic but I'm not yet very familiar with this framework or Angular. There are some list items you can tap to see a page with some details.</p>
  
  <p>This is my list template:</p>
  
  <pre><code>&lt;ion-view view-title="In der Nähe"&gt;
    &lt;ion-content&gt;
      &lt;ion-refresher
        pulling-text="Aktualisieren"
        on-refresh="loadData()"&gt;
      &lt;/ion-refresher&gt;
      &lt;ion-list&gt;
        &lt;ion-item href="#/event/location-details" ng-click="showDetails(location)" ng-repeat="location in locations"&gt;
          {{location.name}}
        &lt;/ion-item&gt;
      &lt;/ion-list&gt;
  
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>  ...
    $scope.showDetails = function(location)
    {
      $rootScope.currentLocationDetails = location;
    };
    ...
  </code></pre>
  
  <p>And this is the details page:</p>
  
  <pre><code>&lt;ion-view view-title="{{location.name}}"&gt;
    &lt;ion-content class="padding"&gt;
      &lt;button ng-show="location.attr.wheelchair == 'yes'" class="button icon ion-paper-airplane button-balanced"&gt;&lt;/button&gt;
      &lt;button ng-show="location.attr.wheelchair == 'limited'" class="button icon ion-paper-airplane button-assertive"&gt;&lt;/button&gt;
      &lt;button ng-show="location.attr.wheelchair == 'no'" class="button icon ion-paper-airplane button-energized"&gt;&lt;/button&gt;
  
      &lt;button ng-show="location.attr.food == 'yes'" class="button icon ion-pizza button-balanced"&gt;&lt;/button&gt;
      &lt;button ng-show="location.attr.food == 'no'" class="button icon ion-pizza button-energized"&gt;&lt;/button&gt;
  
      &lt;button ng-show="location.attr.internet_access == 'yes'" class="button icon ion-wifi button-balanced"&gt;&lt;/button&gt;
      &lt;button ng-show="location.attr.internet_access == 'no'" class="button icon ion-wifi button-energized"&gt;&lt;/button&gt;
  
      &lt;button ng-show="location.attr.smoking == 'no'" class="button icon ion-no-smoking button-balanced"&gt;&lt;/button&gt;
      &lt;button ng-show="location.attr.smoking == 'yes'" class="button icon ion-no-smoking button-energized"&gt;&lt;/button&gt;
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>app.controller('DetailsController', function($scope, $rootScope)
  {
    $scope.location = $rootScope.currentLocationDetails;
  });
  </code></pre>
  
  <p>This works well on Android devices but there's a problem on iOS:</p>
  
  <p>Angular seems to evaluate the ng-show directives after/during the page transition.</p>
  
  <p>This is how it looks on Android:
  <a href="https://www.youtube.com/watch?v=aspI95Jm574">https://www.youtube.com/watch?v=aspI95Jm574</a></p>
  
  <p>iPad running iOS 8:
  <a href="https://www.youtube.com/watch?v=oCf3V8ewq40">https://www.youtube.com/watch?v=oCf3V8ewq40</a></p>
  
  <p>You can see that all the buttons are visible during the animation.</p>
  
  <p>What am I doing wrong? Is this a bug in Ionic? Is there a better way to pass the location object to the DetailsController in this case?</p>
  
  <p>Please let me know if you need to see more of the code.</p>
  
  <p>Thanks!</p>