title: Dot notation in href replacing entire URL path
body: <p>I am working on an AngularJS web application where I need to use an href in the template to launch a child state. Long story, but href is my only option for now (not alternatives like $state.go() or ui-sref directives, etc.). </p>
  
  <p>Basically I'm trying to launch a child state (a modal window) that is routed to my current state (parent). An example <em>current</em> URL from which the link can be clicked is</p>
  
  <pre><code>localhost:3000/#/contact/aboutus
  </code></pre>
  
  <p>This is not the only possible parenting state throughout the app, though, so I need the initial part of the path to remain dynamic. Let's say I'm trying to launch a "directory" modal window from this page, though, that corresponds to the following URL:</p>
  
  <pre><code>localhost:3000/#/contact/aboutus/directory
  </code></pre>
  
  <p>I would expect this to be possible with the following code that I have:</p>
  
  <pre><code>&lt;div class="internal-margin"&gt;
      &lt;a href="./directory"&gt;
          &lt;span ng-bind-html="'{{link.label | translate}}'"&gt;&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Notice the href="./directory". I am trying to use this dot notation in order to append to the existing URL path. When I click the link on the page, however, it directs me to the URL: </p>
  
  <pre><code>localhost:3000/directory
  </code></pre>
  
  <p>The entire path is replaced and this URL is a 404. Why is this happening? Does the problem lie deeper in how the ui routing is taking place, or am I completely missing something?</p>