Google Map Javascript Api, Angular, Dynamicly Loaded Page - angularjs

Question

What happened past weeks i don't know if google messed things up again. My map stopped working.
I transferred the app Angular for routes. When the contact page loads, initializeMap function called.
I got new browser api key from google console which is not like old. I enabled Javascript Map Api. I entered my URLs in credential.
Sometimes it gives error invalidkey*** but only sometimes.
It works on my domain if i put everything in one single file.
It also works on codepen. I don't know why? There is no error to debug this thing. My beloved javascript.
http://codepen.io/emrahatilkan/pen/bVwzrR
Edit: This is about angular definitely.
Google Map Link in index.html:
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"></script>
My URL: index.html/#/contact
I don't know if it is relevant but contact.html is inside pages/ folder.
My Code is in main.js:
function initializeMap() {
console.log('init map'); //this outputs to console
var mapOptions = {
center: { lat: 39.7944417, lng: 30.4935026 },
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: false,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Some Title'
});
var infowindow = new google.maps.InfoWindow({
content: '<h5>Some Title</h5>'
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}