$location.path not working - angularjs

Question

I am working on angularjs form where I need to navigate to other template on click on anchor tag. ng-click is working but problem is with $location.path.
here is main template
Forgot Password
Now on its controller I have mentioned same method name
$scope.ShowForgotPasswordForm = function () {
$location.path("/forgotpasswordform");
};
Now main controllerjs and forgotpasswordform form both are in same folder.
Then I added this form to directive js file which is again in same folder.
angularFormsApp.directive('forgotpasswordform',
function () {
var baseurl = window.location.protocol + "//" + window.location.host + "/";
return {
restrict: 'E',
templateUrl: baseurl + 'app/Login/forgotPasswordForm.html'
}
});
and template for forgot password is as below, which is also in same folder
<!--ForgotPassword Form Start-->
<div class="container-fluid">
<div class="row-fluid">
<form class="form-signin padding mg-tb200" novalidate name="forgotpasswordform" role="form">
<h3 class="line-btm">Forgot Password</h3>
<p class="lh20">
Please enter a valid email ID in the text field below,
if it matches our database, a password reset link
will be sent on this email ID.
</p>
<input type="email" class="form-control log-input" placeholder="Email address" required autofocus>
<div class="checkbox">
<button class="btn-submit right" type="submit">Submit</button>
</div>
</form>
</div>
</div>
<!--ForgotPassword Form End-->
But when I click on anchor tag its going to function ShowForgotPasswordForm
but not navigating to form.

Answer 1

Use window.location.pathname then, if $location is not undefined it should work.

Answer 2

So there are a few problems with your code.
First it looks like you have a conceptual mistake that the directive name is linked with the URL path. This is not the case.
But you can link them using a router such as the Component-Router, uiRouter or ngRouter.
Lets take a look at how this would look using uiRouter:
We add change your link to use the uiRouter state reference directive
<a ui-sref="forgotPassword"
class="forgot-txt"
ng-show="loginUser.typeofUser == 'ExternalUser'">
Forgot Password
</a>
We will replace your directive with a controller. I won't include the code here.
Now we will define a state configuration:
forgotPasswordStateConfig.$inject = ['$stateProvider'];
function forgotPasswordStateConfig($stateProvider) {
$stateProvider
.state('forgotPassword', {
url: 'forgotpassword',
templateUrl: 'app/Login/forgotPasswordForm.html',
controller: 'ForgotPasswordCtrl as ctrl'
});
}
app.config(forgotPasswordStateConig);