Google map is not loading in angular routing

I am using angular routing in index.php and in one of contact.php.I am using google map so when I navigate to contact.php, google map is not showing but when hit ctrl + f5 refresh the page map is showing, I don't know where I am doing wrong because there is no error showing in the console log. Please help me.

here is my code for routing and redirect.Both are not working. Thanks in Advance.

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
    templateUrl : "home.php"
})
.when("/about", {
    templateUrl : "about.php"
})
.when("/contact", {
    templateUrl : "contact.php"
})
.when("/mission", {
    templateUrl : "mission.php"
})
.when("/leadership", {
    templateUrl : "leadership.php"
})
.when("/product", {
    templateUrl : "product.php"
}).otherwise({redirectTo:'/'});
});

here is my contact.php page code

<div class="margin-bottom-90 fix">              
            <div class="col-sm-6">
                <div id="contact-map"></div>
            </div>          

            <div class="contact-form col-sm-6 ">
                <h2>contact form</h2>
                <form action="#">
                    <div class="input-box transparent"><input type="text" name="name" placeholder="Name*"></div>
                    <div class="input-box transparent"><input type="text" name="email" placeholder="Email*"></div>
                    <div class="input-box transparent"><input type="text" name="subject" placeholder="Subject"></div>
                    <div class="input-box transparent"><textarea placeholder="Message" name="message"></textarea></div>
                    <div class="input-box submit-box width-full"><input type="submit" value="send" class="button large"></div>
                </form>
            </div>      
        </div>