angularjs directive template path not getting loaded
<p>My current project structure is this</p>

<pre><code>app/
   app1/
       login/
            app1.login.partials.html
       .
       .
       index.html
   app2/
   shared/
       login/
           login.directive.js
           login.partials.html
</code></pre>

<p>The code for login.directive.js is</p>

<pre><code>angular.module('shared').directive('loginComponent', [ function () {
    return {
        restrict: 'E',
        templateUrl: 'login.partials.html',
        scope: {
            loginType: '@type'
        },
        controller: function ($scope) {
        }
    };
}]);
</code></pre>

<p>The code for app1.login.paritals.html is simple</p>

<pre><code>&lt;login-component type="type1"&gt;&lt;/login-component&gt;
</code></pre>

<p>When running app1, it refuses to load login.partials.html because of its path. The template loads only if I specify the path as <code>'../shared/login/login.html'</code>.
Is this due to the placement of index.html? Specifying a template path like above would kill the re-usability of the directive, as strict naming conventions would have to be followed </p>