AngularJS routing error inside a controller


I have the following AngularJS routing setup.


.config(function($stateProvider, $urlRouterProvider){
  //some code
  .state('app.edit', {
    url: '/edit/:recipeId',
    views: {
      'menuContent': {
        templateUrl: 'templates/recipes/edit.html',
        controller: 'editRecipeCtrl'
  //some code


<a ng-click="editDemo()" href='#'>Edit</a>

The problem is when I click the link, it does not go to the edit page. (following are the observations)

  • No error in the console
  • I can see the url is changing in the address bar, but it quickly
    fall-back to the home page
  • If I type http://localhost/#/app/edit/1 in the address bar , it works
  • it calls the editDemo() method.


$scope.editDemo = function(){
    // options I tried
    // $location.path( '/edit/1' );
    // $location.path( '#/app/edit/1');  
    // $location.path( 'edit/1');  
    // $location.url( '/edit/1' );
    // $location.url( '#/app/edit/1' ); 
    // $location.url( 'edit/1');
    // location.href = '/#/app/edit/1';


I prefer (to prevent pitfalls) to use the $state service

$scope.editDemo = function(id) {
    $state.go('app.edit', {recipeId: id});

Answered By – Ben Diamant

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published