angularjs routing error inside a controller

I have the following angularjs routing setup.

app.js

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

view

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

the problem is when I click the link, it doesnot 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.

controller.js

$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';
}

Any help would be much appreciated.

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

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

You have at least 2 ways here:

1) remove href from <a> tag: <a ng-click="editDemo()">Edit</a> and in editDemo: 

$scope.editDemo = function(){
   $location.path( '/edit/1' );
}

2) work with click event in editDemo:

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

$scope.editDemo = function($event){
     $event.preventDefault();
     $location.path( '/edit/1' );
}