Relative url of custom directive template isn't recognized [Urgent]

Hi, I’ve just implemented and custom directive to my ionic app but the template url cannot be loaded.
This is the errror I get:
Error: [$compile:tpload] Failed to load template: templates/directives/advertisement.html (HTTP status: 0 )

My ionic app structure is like this:
js
- app.js
- filters.js
- controllers.js
- directives.js
templates
- directives
advertisement.html (the template I’m trying to get)
index.html

Below is my directive declaration:

angular.module('app.directives', [])

.directive('advertisement', function ($http) {
    return {
        scope: true,
        link: function (scope, element, attr) {
            scope.banners = [
              {
                  id: 1,
                  image: 'http://www.omicsgroup.com/conferences/ACS/conference/photos/5160-CityGuideImage.jpg',
                  title: 'Istanbul Night <br> From 59$',
                  ref: ''
              },
              {
                  id: 2,
                  image: 'http://cdn.podravka.net/repository/images/1/f/1f254c3ca35cc7e6b6530937e5bc0bdf.jpg',
                  title: 'Skopje Tour <br> From 59$ Night',
                  ref: ''
              },
              {
                  id: 3,
                  image: 'http://static.travel.usnews.com/images/destinations/86/paris_edited_445x280.jpg',
                  title: 'Paris Night',
                  ref: ''
              }
            ]
        },
        templateUrl: 'templates/directives/advertisement.html'
    }
})

In the same manner I’m able to access popover templates at located at the same directory templates and the controllers.js is inside js folder.

It’s very frustrating error and I’m close to deadline so I need to implement it asap.