How/when to use ng-click to call a route?

Routes monitor the $location service and respond to changes in URL (typically through the hash). To "activate" a route, you simply change the URL. The easiest way to do that is with anchor tags.

<a href="#/home">Go Home</a><a href="#/about">Go to About</a>

Nothing more complicated is needed. If, however, you must do this from code, the proper way is by using the $location service:

$scope.go = function ( path ) {  $location.path( path );};

Which, for example, a button could trigger:

<button ng-click="go('/home')"></button>

Here's a great tip that nobody mentioned. In the controller that the function is within, you need to include the location provider:

app.controller('SlideController', ['$scope', '$location',function($scope, $location){ $scope.goNext = function (hash) { $location.path(hash); };]); <!--the code to call it from within the partial:---> <div ng-click='goNext("/page2")'>next page</div>

Using a custom attribute (implemented with a directive) is perhaps the cleanest way. Here's my version, based on @Josh and @sean's suggestions.

angular.module('mymodule', [])// Click to navigate// similar to <a href="#/partial"> but hash is not required, // e.g. <div click-link="/partial">.directive('clickLink', ['$location', function($location) {    return {        link: function(scope, element, attrs) {            element.on('click', function() {                scope.$apply(function() {                    $location.path(attrs.clickLink);                });            });        }    }}]);

It has some useful features, but I'm new to Angular so there's probably room for improvement.