AngularJS routing error inside a controller

Question

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 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.

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

Answer 1

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

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