ng-show in this sample not working

Question

What I want is to show a DIV when I click a button and hide it after 2s.

<div ng-show="alertMsg.show">{{alertMsg.text}}</div>

After triggering the click event, the DIV shows correctly, but cannot hide. It seems that the value of "alertMsg.show" has been changed to FALSE correctly after 2s, but the DIV still there in the view.

Click Event:

$scope.$apply(function(){
            $scope.alertMsg.show = true;
        });

        $timeout(function () {
            $scope.alertMsg.show = false;
        }, 2000);

I want to know how to hide the DIV via $timeout

Answer 1

hide show with time limit

live code is here http://jsfiddle.net/dofrk5kj/4/

HTML

<div ng-controller="homeController">
        <button ng-click="showAlert()"> Show alert </button>
      <div ng-show="alertMsg.show">{{alertMsg.text}}</div>
</div>

controller.js

controller('homeController', function ($scope, $timeout) {
     $scope.alertMsg = {
        show: false,
        text:"Alert message is ::show"
     };
     $scope.showAlert =function(){
         $scope.alertMsg.show = true;
         $timeout(function(){      
             $scope.alertMsg.show = false;
          }, 2000);
     }
   });

but you can use separate flag to hide/show alert

<alert ng-repeat="alert in alerts" type="{{alert.type}}"
                    close="closeAlert($index)">{{alert.msg}} </alert>