title: Cannot Animate Custom Directive with ngShow
body: <p>I'm trying to animate a custom modal directive using ng-show, following the example shown on the <a href="https://code.angularjs.org/1.3.10/docs/api/ng/directive/ngShow" rel="nofollow">Angular</a> website (example is at the very bottom of the page). However, I haven't had any luck getting it to work.</p>
  
  <p>I'm using Angular 1.3.x with Bootstrap 3.3.x. I'm not using Angular UI Bootstrap because a custom modal directive is more flexible for my needs.</p>
  
  <p>Here's what I've got so far:</p>
  
  <p>Modal.js:</p>
  
  <pre><code>angular.module('plunker', [])
    .directive('myModal', function() {
      return {
        restrict: 'E',
        transclude: true,
        replace: true,
        templateUrl: 'modal.html',
        controller: 'ModalCtrl',
        link: function(scope, element, attrs) {
          scope.showModal = false;
  
          if (attrs.title === undefined) {
            scope.title = 'Modal Title Placeholder';
          } else {
            scope.title = attrs.title;
          }
  
          scope.$watch('showModal', function(isHidden) {
            if (isHidden) {
  
            } else {
  
            }
          });
        }
      };
    }).controller('ModalCtrl', ['$scope',
      function($scope) {
        $scope.$open = function() {
          $scope.showModal = true;
        };
  
        $scope.$close = function() {
          $scope.showModal = false;
        };
      }
    ]);
  </code></pre>
  
  <p>modal.html:</p>
  
  <pre><code>&lt;div role="dialog" tabindex="-1" class="modal modal-fade" ng-show="showModal"&gt;
      &lt;div class="modal-backdrop" style="height: 100%"&gt; &lt;/div&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h3 class="modal-title"&gt;{{title}}&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="content" ng-transclude&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>modal.css:</p>
  
  <pre><code>.modal-fade {
    opacity: 1;
    display: block !important;
  }
  
  .modal-fade .ng-hide-add .ng-hide-add-active,
  .modal-fade .ng-hide-remove .ng-hide-remove-active {
    -webkit-transition: all linear 1s;
    -moz-transition: all linear 1s;
    transition: all linear 1s;
  }
  
  .modal-fade .ng-hide {
    opacity: 0;
    display: none;
  }
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>&lt;my-modal title="Example Modal"&gt;
      &lt;p&gt;Some text&lt;/p&gt;
      &lt;button type="button" class="btn btn-primary" ng-click="$close()"&gt;Close&lt;/button&gt;
  &lt;/my-modal&gt;
  &lt;button type="button" class="btn btn-primary" ng-click="$open()"&gt;Open Modal&lt;/button&gt;
  </code></pre>
  
  <p>Everything else works fine, i.e. the Modal shows up and can be closed, but there's no animation.</p>
  
  <p><strong>Here's a <a href="http://plnkr.co/edit/ss4ZBRbY8noVrYGD1Osm?p=preview" rel="nofollow">Plunkr</a> link to the code</strong>.</p>