Angular - changing the state from the markup

Question

Currently I'm able to change the state from the controller like this:

$scope.goTo = function(state){
  $state.go(state);
}

---

<li class="list-group-item" ng-click="goTo('main')">HOME</li>

Is there any way to do it straight from the html instead of having to write a controller function?

Answer 1

Yes, assuming you're using ui-router you'd use hyperlinks with ui-sref specifying the state to go to. Something like:

<li class="list-group-item"><a ui-sref="HOME">HOME</a></li>

All of the various routing providers support something similar.