If $location.path() is not updating the browser URL in your AngularJS app, it usually means one of the following is going wrong with how the app is structured or how AngularJS is bootstrapped or loaded. Let’s dig in step-by-step to understand why this happens and how to fix it. We’ll go deep and cover all angles—routing config, URL modes, JavaScript behavior, and even subtle issues like digest cycles.
What Does $location.path() Do?
In AngularJS, $location.path('/somePath') is used to programmatically change the URL in the browser (the path part, not full reload).
$location.path('/dashboard');
This should change:
http://localhost:8000/#/home
➡
http://localhost:8000/#/dashboard
And Angular should load the template/controller tied to /dashboard.
Why $location.path() Might Not Work
Here are all the common causes and step-by-step solutions:
1. You’re Not Injecting $location Properly
You must inject $location in the controller or service where you use it.
Fix:
app.controller('MyCtrl', function($scope, $location) {
$scope.goToDashboard = function() {
$location.path('/dashboard');
};
});
2. You’re Not in a $digest Cycle
If you call $location.path() outside of Angular’s digest loop (e.g., from setTimeout, jQuery, or a native event), it won’t trigger a view update.
Fix:
Wrap it in $scope.$apply() if you’re outside Angular’s digest cycle.
setTimeout(function() {
$scope.$apply(function() {
$location.path('/dashboard');
});
}, 1000);
Without
$apply, Angular doesn’t know something changed, so it doesn’t trigger routing.
3. You’re Using HTML5 Mode Without Server Support
If you’re using HTML5 mode ($locationProvider.html5Mode(true)), you need to configure your server to redirect all requests to index.html.
Fix:
JS Configuration:
$locationProvider.html5Mode(true);
Server Config (example for Node/Express):
app.get('*', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
If you don’t want to deal with server setup, use hash mode:
$locationProvider.html5Mode(false);
4. Your Route Doesn’t Exist or Isn’t Matched
If you change the path using $location.path() to a route that isn’t defined in $routeProvider, Angular will not render anything.
Fix:
Check your route definitions:
$routeProvider
.when('/dashboard', {
templateUrl: 'dashboard.html',
controller: 'DashboardCtrl'
})
.otherwise({ redirectTo: '/home' });
5. You’re Not Using ng-app Properly
If Angular isn’t properly bootstrapped (e.g., you misspelled ng-app or it’s on the wrong element), routing won’t work.
Fix:
In your main HTML:
<html ng-app="myApp">
Also, ensure your app is correctly declared:
angular.module('myApp', ['ngRoute']);
6. Mixing jQuery Events or Raw JS
If you’re binding events with jQuery and using $location.path() inside them, Angular won’t automatically update unless you trigger digest manually.
Wrong:
$('#btn').click(function() {
$location.path('/home'); // won't work
});
Fix:
$('#btn').click(function() {
var scope = angular.element($('#btn')).scope();
scope.$apply(function() {
scope.goHome(); // this calls $location.path internally
});
});
Or better: use Angular’s ng-click.
7. You’re Using ui-router Instead of $location.path()
If you’re using ui-router ($stateProvider), you shouldn’t use $location.path().
Use:
$state.go('dashboard');
Full Working Example
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<a href="#!/home">Home</a>
<a href="#!/dashboard">Dashboard</a>
<div ng-controller="MainCtrl">
<button ng-click="goDashboard()">Go to Dashboard</button>
</div>
<div ng-view></div>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
template: '<h2>Home</h2>'
})
.when('/dashboard', {
template: '<h2>Dashboard</h2>'
})
.otherwise({ redirectTo: '/home' });
// Use hash mode for simplicity
$locationProvider.html5Mode(false);
});
app.controller('MainCtrl', function($scope, $location) {
$scope.goDashboard = function() {
$location.path('/dashboard');
};
});
Summary Checklist
| Check | Description |
|---|---|
$location is injected | Make sure it’s injected correctly |
| Inside digest | Use $apply() if outside Angular scope |
| Route is defined | Check $routeProvider config |
| HTML5 mode support | Match with server setup or use hash mode |
| Not mixing with jQuery | Or wrap in $apply() if you do |
Use $state.go() with ui-router | Don’t mix $location with ui-router |
| Debug in DevTools | Watch $location.path() and console logs |