angularjs - Issues with getting $timeout function to work

Question

I have created a plunkr with my code that does work. After the drop down is collapsed by clicking the Toggle collapse button, I need the dropdown to close on it's own after 3 seconds. I have played with the following in the HeaderCtrl in example.js with no luck:

function callAtTimeout(){
  $scope.isFooCollapsed = true;
}

$timeout(function(){ 
  !$scope.callAtTimeout();
}, 3000);

http://plnkr.co/edit/wMxA4Tkiqr9BsSfxia02?p=preview

Any help/input would be appreciated. Thanks in advance!

Answer 1

You can just use angular $timeout to achieve the wanted like this:

var timer;
$scope.isFooCollapsed = true;
$rootScope.$on("bagNotification", function() {
  $timeout.cancel(timer);
  $scope.isFooCollapsed = !$scope.isFooCollapsed;
  timer = $timeout(function() {
    $scope.isFooCollapsed = true;
  }, 3000);
});

We cancel the timeout each time with $timeout.cancel to prevent multiple hide/shows when button is clicked multiple times.

Plunkr: http://plnkr.co/edit/YbsCuicDiHVDGULwpap3?p=preview