Hide footer and footer message after particular interval using $timeout()

Question

I am trying to create an angular app using Intel XDK. Here when I run the index page we can see footer message. What I need is the footer and footer message will hide after 5 seconds using timeout().

But my code of below is not working.

index.html

 <div class="bar bar-footer bar-balanced" style="background-color:#444444;">
            <div class="title">{{footer_message}}</div>
        </div>

app.js

     app.controller('main', function ($scope,$interval,$timeout,$ionicModal,localStorageService,$http,$q,$templateCache) {
        $scope.footer_message ='Powered By';

        $scope.checkConnection=function() {
                    var networkState = navigator.connection.type;

                    if(networkState == Connection.NONE){
                        $scope.footer_message = "No Network Connection";

                        return false;

                    }
                    else{
                        $scope.footer_message = "Powered by";
                        return true;
                    }
                }


        $scope.showFooter=function(){
                $timeout(function () {
                    $scope.footer_message = null;
            }, 5000);
           }
        $scope.showFooter();
}

Answer 1

I have created one example for you check this plunkr
http://plnkr.co/edit/PLTgJ2JraNOHAwNKk7iY?p=preview