带淡入度表达式的角度ng show不移除div

我试图显示一个div,其中包含一条错误消息,该消息带有ng show和ng class,并设置为fade和一个表达式。消息在设置的时间之后消失,但是,创建显示错误消息的div不会被删除。

我希望创建的div在消息消失时也被删除。有人能帮忙吗?

这是我的密码笔- link

这是我的html代码

  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" 
type="text/css" />    
    <section data-ng-app="app" class="container" data-ng-controller="messageController">    

        <hr />      

      <div data-ng-show="showError" ng-class="{fade:doFade}" class="alert alert-danger"><strong>Error:</strong> {{errorMessage}}</div>

      <button data-ng-click="fakeError()" class="btn btn-default">Fake an Error</button>
      <hr />      
    </section>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

还有js代码

var app = angular.module('app',[]);

app.controller('messageController', ['$scope', '$timeout', function($scope, $timeout){

  $scope.showError = false;
  $scope.doFade = false;

  $scope.fakeError = function(){

    //reset
    $scope.showError = false;
    $scope.doFade = false;

    $scope.showError = true;

    $scope.errorMessage = 'We\'re mixing apples and oranges!';

    $timeout(function(){
      $scope.doFade = true;
    }, 2500);
  };
}]);